@basic-ui/material 1.0.0-alpha.42 → 1.0.0-alpha.44

package/src/Tab/TabList.tsx

@@ -1,61 +1,61 @@
-import { forwardRef, useRef } from 'react';
-import type { TabListProps as TabListPropsCore } from '@basic-ui/core';
-import { TabList as TabListCore } from '@basic-ui/core';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { TabIndicatorProvider } from '../TabIndicator';
-import { TabListProvider } from './context';
-
-export type TabListProps = TabListPropsCore &
-  BoxProps & {
-    indicatorColor?: string;
-    textColor?: string;
-    selectedTextColor?: string;
-    variant?: 'primary' | 'secondary';
-  };
-
-const TabListInner = forwardRef<HTMLDivElement, TabListProps>(
-  function TabListInner(props, forwardedRef) {
-    const { innerAs, ...otherProps } = props;
-
-    return (
-      <Box
-        as={innerAs}
-        ref={forwardedRef}
-        __css={{ minWidth: rem(360), display: 'flex', alignItems: 'center' }}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-export const TabList = forwardRef<HTMLDivElement, TabListProps>(
-  function TabList(props, forwardedRef) {
-    const {
-      as = 'div',
-      indicatorColor = 'primary',
-      textColor = 'on.surface',
-      selectedTextColor,
-      variant = 'secondary',
-      ...otherProps
-    } = props;
-    const currentIndicator = useRef<HTMLSpanElement>(null);
-
-    return (
-      <TabListProvider
-        value={{ indicatorColor, textColor, selectedTextColor, variant }}
-      >
-        <TabIndicatorProvider value={{ currentIndicator }}>
-          <TabListCore
-            as={TabListInner}
-            innerAs={as}
-            ref={forwardedRef}
-            {...otherProps}
-          />
-        </TabIndicatorProvider>
-      </TabListProvider>
-    );
-  }
-);
+import { forwardRef, useRef } from 'react';
+import type { TabListProps as TabListPropsCore } from '@basic-ui/core';
+import { TabList as TabListCore } from '@basic-ui/core';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { TabIndicatorProvider } from '../TabIndicator';
+import { TabListProvider } from './context';
+
+export type TabListProps = TabListPropsCore &
+  BoxProps & {
+    indicatorColor?: string;
+    textColor?: string;
+    selectedTextColor?: string;
+    variant?: 'primary' | 'secondary';
+  };
+
+const TabListInner = forwardRef<HTMLDivElement, TabListProps>(
+  function TabListInner(props, forwardedRef) {
+    const { innerAs, ...otherProps } = props;
+
+    return (
+      <Box
+        as={innerAs}
+        ref={forwardedRef}
+        __css={{ minWidth: rem(360), display: 'flex', alignItems: 'center' }}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(
+  function TabList(props, forwardedRef) {
+    const {
+      as = 'div',
+      indicatorColor = 'primary',
+      textColor = 'on.surface',
+      selectedTextColor,
+      variant = 'secondary',
+      ...otherProps
+    } = props;
+    const currentIndicator = useRef<HTMLSpanElement>(null);
+
+    return (
+      <TabListProvider
+        value={{ indicatorColor, textColor, selectedTextColor, variant }}
+      >
+        <TabIndicatorProvider value={{ currentIndicator }}>
+          <TabListCore
+            as={TabListInner}
+            innerAs={as}
+            ref={forwardedRef}
+            {...otherProps}
+          />
+        </TabIndicatorProvider>
+      </TabListProvider>
+    );
+  }
+);

package/src/Tab/TabPanel.tsx

@@ -1,31 +1,31 @@
-import { forwardRef } from 'react';
-import type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';
-import { TabPanel as TabPanelCore } from '@basic-ui/core';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export type TabPanelProps = TabPanelPropsCore & BoxProps;
-
-const TabPanelInner = forwardRef<HTMLDivElement, TabPanelProps>(
-  function TabPanelInner(props, forwardedRef) {
-    const { innerAs, ...otherProps } = props;
-
-    return <Box as={innerAs} ref={forwardedRef} {...otherProps} />;
-  }
-);
-
-export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
-  function TabPanel(props, forwardedRef) {
-    const { as = 'div', ...otherProps } = props;
-
-    return (
-      <TabPanelCore
-        as={TabPanelInner}
-        innerAs={as}
-        ref={forwardedRef}
-        {...otherProps}
-      />
-    );
-  }
-);
+import { forwardRef } from 'react';
+import type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';
+import { TabPanel as TabPanelCore } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type TabPanelProps = TabPanelPropsCore & BoxProps;
+
+const TabPanelInner = forwardRef<HTMLDivElement, TabPanelProps>(
+  function TabPanelInner(props, forwardedRef) {
+    const { innerAs, ...otherProps } = props;
+
+    return <Box as={innerAs} ref={forwardedRef} {...otherProps} />;
+  }
+);
+
+export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
+  function TabPanel(props, forwardedRef) {
+    const { as = 'div', ...otherProps } = props;
+
+    return (
+      <TabPanelCore
+        as={TabPanelInner}
+        innerAs={as}
+        ref={forwardedRef}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Tab/TabPanels.tsx

@@ -1,5 +1,5 @@
-import { TabPanels } from '@basic-ui/core';
-import type { TabPanelsProps } from '@basic-ui/core';
-
-export { TabPanels };
-export type { TabPanelsProps };
+import { TabPanels } from '@basic-ui/core';
+import type { TabPanelsProps } from '@basic-ui/core';
+
+export { TabPanels };
+export type { TabPanelsProps };

package/src/Tab/Tabs.tsx

@@ -1,5 +1,5 @@
-import { Tabs } from '@basic-ui/core';
-import type { TabsProps } from '@basic-ui/core';
-
-export { Tabs };
-export type { TabsProps };
+import { Tabs } from '@basic-ui/core';
+import type { TabsProps } from '@basic-ui/core';
+
+export { Tabs };
+export type { TabsProps };

package/src/Tab/context.ts

@@ -1,17 +1,17 @@
-import { createContext, useContext } from 'react';
-
-// TabList Component
-export interface TabListContextProps {
-  indicatorColor: string;
-  textColor: string;
-  selectedTextColor?: string;
-  variant: 'primary' | 'secondary';
-}
-
-const TabListContext = createContext<TabListContextProps>({
-  indicatorColor: 'primary',
-  textColor: 'on.surface',
-  variant: 'secondary',
-});
-export const { Provider: TabListProvider } = TabListContext;
-export const useTabListContext = () => useContext(TabListContext);
+import { createContext, useContext } from 'react';
+
+// TabList Component
+export interface TabListContextProps {
+  indicatorColor: string;
+  textColor: string;
+  selectedTextColor?: string;
+  variant: 'primary' | 'secondary';
+}
+
+const TabListContext = createContext<TabListContextProps>({
+  indicatorColor: 'primary',
+  textColor: 'on.surface',
+  variant: 'secondary',
+});
+export const { Provider: TabListProvider } = TabListContext;
+export const useTabListContext = () => useContext(TabListContext);

package/src/Tab/index.ts

@@ -1,5 +1,5 @@
-export * from './Tabs';
-export * from './TabList';
-export * from './Tab';
-export * from './TabPanels';
-export * from './TabPanel';
+export * from './Tabs';
+export * from './TabList';
+export * from './Tab';
+export * from './TabPanels';
+export * from './TabPanel';

package/src/TabIndicator/TabIndicator.tsx

@@ -1,146 +1,146 @@
-import type { RefObject } from 'react';
-import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
-import { rem } from 'polished';
-import { assignMultipleRefs } from '@basic-ui/core';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { useTabIndicatorContext } from './context';
-import { EASING_STANDARD } from '../motion';
-
-export interface TabIndicatorProps extends BoxProps {
-  selected?: boolean;
-  color?: string;
-  variant: 'primary' | 'secondary';
-  labelRef: RefObject<HTMLParagraphElement | null>;
-}
-
-const WIDTH_PROPERTY_NAME = '--indicator-width';
-const SCALE_PROPERTY_NAME = '--indicator-scale';
-
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
-  function TabIndicator(props, forwardedRef) {
-    const {
-      as = 'span',
-      selected,
-      color = 'primary',
-      variant,
-      labelRef,
-      ...otherProps
-    } = props;
-    const ref = useRef<HTMLSpanElement>(null);
-    const { currentIndicator } = useTabIndicatorContext();
-    const resizeObserverRef = useRef<ResizeObserver>();
-
-    useEnhancedEffect(() => {
-      if (selected && ref.current) {
-        if (currentIndicator.current !== null) {
-          // We are switching indicator, let's slide!
-          const previousClientRect =
-            currentIndicator.current.getBoundingClientRect();
-          const currentClientRect = ref.current.getBoundingClientRect();
-          const xPosition = previousClientRect.left - currentClientRect.left;
-
-          const prevTransition = ref.current.style.transition;
-          const prevTransform = ref.current.style.transform;
-          ref.current.style.transition = 'none';
-          if (variant === 'primary') {
-            const prevWidth =
-              currentIndicator.current.style.getPropertyValue(
-                WIDTH_PROPERTY_NAME
-              );
-            const currentWidth =
-              ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
-            const widthDelta = String(
-              parseFloat(prevWidth) / parseFloat(currentWidth)
-            );
-            ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);
-            ref.current.style.transform = `translateX(${xPosition}px)`;
-          } else {
-            const widthDelta =
-              previousClientRect.width / currentClientRect.width;
-            ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
-          }
-
-          // Force repaint before updating classes and transform to ensure the transform properly takes effect
-          ref.current.getBoundingClientRect();
-
-          // Restore and let transition do it's magic
-          ref.current.style.transition = prevTransition;
-          ref.current.style.transform = prevTransform;
-          if (variant === 'primary') {
-            ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');
-          }
-        }
-        currentIndicator.current = ref.current;
-      }
-    }, [selected, variant]);
-
-    useEnhancedEffect(() => {
-      if (variant === 'secondary') {
-        return;
-      }
-
-      if (labelRef.current && ref.current) {
-        const width = labelRef.current.getBoundingClientRect().width;
-        ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);
-
-        if (typeof ResizeObserver === 'function') {
-          resizeObserverRef.current ??= new ResizeObserver(([entry]) => {
-            if (ref.current) {
-              ref.current.style.setProperty(
-                WIDTH_PROPERTY_NAME,
-                `${entry.contentRect.width}px`
-              );
-            }
-          });
-
-          resizeObserverRef.current?.observe(labelRef.current);
-          return () => resizeObserverRef.current?.disconnect();
-        }
-      }
-    }, [labelRef, variant]);
-
-    return (
-      <Box
-        as={as}
-        ref={assignMultipleRefs(ref, forwardedRef)}
-        __css={{
-          bg: color,
-          position: 'absolute',
-          bottom: 0,
-          transform: `scale(1)`,
-          opacity: selected ? 1 : 0,
-          transition: `transform .25s ${EASING_STANDARD}`,
-          zIndex: 1,
-          ...(variant === 'secondary'
-            ? {
-                width: '100%',
-                height: rem(2),
-              }
-            : {
-                width: '100%',
-                '&::before': {
-                  content: '""',
-                  width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,
-                  height: rem(3),
-                  borderTopLeftRadius: rem(3),
-                  borderTopRightRadius: rem(3),
-                  bg: color,
-                  position: 'absolute',
-                  transformOrigin: 'center',
-                  bottom: 0,
-                  left: '50%',
-                  transition: `inherit`,
-                  transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`,
-                },
-              }),
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { RefObject } from 'react';
+import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
+import { rem } from 'polished';
+import { assignMultipleRefs } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTabIndicatorContext } from './context';
+import { EASING_STANDARD } from '../motion';
+
+export interface TabIndicatorProps extends BoxProps {
+  selected?: boolean;
+  color?: string;
+  variant: 'primary' | 'secondary';
+  labelRef: RefObject<HTMLParagraphElement | null>;
+}
+
+const WIDTH_PROPERTY_NAME = '--indicator-width';
+const SCALE_PROPERTY_NAME = '--indicator-scale';
+
+const useEnhancedEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
+  function TabIndicator(props, forwardedRef) {
+    const {
+      as = 'span',
+      selected,
+      color = 'primary',
+      variant,
+      labelRef,
+      ...otherProps
+    } = props;
+    const ref = useRef<HTMLSpanElement>(null);
+    const { currentIndicator } = useTabIndicatorContext();
+    const resizeObserverRef = useRef<ResizeObserver>();
+
+    useEnhancedEffect(() => {
+      if (selected && ref.current) {
+        if (currentIndicator.current !== null) {
+          // We are switching indicator, let's slide!
+          const previousClientRect =
+            currentIndicator.current.getBoundingClientRect();
+          const currentClientRect = ref.current.getBoundingClientRect();
+          const xPosition = previousClientRect.left - currentClientRect.left;
+
+          const prevTransition = ref.current.style.transition;
+          const prevTransform = ref.current.style.transform;
+          ref.current.style.transition = 'none';
+          if (variant === 'primary') {
+            const prevWidth =
+              currentIndicator.current.style.getPropertyValue(
+                WIDTH_PROPERTY_NAME
+              );
+            const currentWidth =
+              ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+            const widthDelta = String(
+              parseFloat(prevWidth) / parseFloat(currentWidth)
+            );
+            ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);
+            ref.current.style.transform = `translateX(${xPosition}px)`;
+          } else {
+            const widthDelta =
+              previousClientRect.width / currentClientRect.width;
+            ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
+          }
+
+          // Force repaint before updating classes and transform to ensure the transform properly takes effect
+          ref.current.getBoundingClientRect();
+
+          // Restore and let transition do it's magic
+          ref.current.style.transition = prevTransition;
+          ref.current.style.transform = prevTransform;
+          if (variant === 'primary') {
+            ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');
+          }
+        }
+        currentIndicator.current = ref.current;
+      }
+    }, [selected, variant]);
+
+    useEnhancedEffect(() => {
+      if (variant === 'secondary') {
+        return;
+      }
+
+      if (labelRef.current && ref.current) {
+        const width = labelRef.current.getBoundingClientRect().width;
+        ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);
+
+        if (typeof ResizeObserver === 'function') {
+          resizeObserverRef.current ??= new ResizeObserver(([entry]) => {
+            if (ref.current) {
+              ref.current.style.setProperty(
+                WIDTH_PROPERTY_NAME,
+                `${entry.contentRect.width}px`
+              );
+            }
+          });
+
+          resizeObserverRef.current?.observe(labelRef.current);
+          return () => resizeObserverRef.current?.disconnect();
+        }
+      }
+    }, [labelRef, variant]);
+
+    return (
+      <Box
+        as={as}
+        ref={assignMultipleRefs(ref, forwardedRef)}
+        __css={{
+          bg: color,
+          position: 'absolute',
+          bottom: 0,
+          transform: `scale(1)`,
+          opacity: selected ? 1 : 0,
+          transition: `transform .25s ${EASING_STANDARD}`,
+          zIndex: 1,
+          ...(variant === 'secondary'
+            ? {
+                width: '100%',
+                height: rem(2),
+              }
+            : {
+                width: '100%',
+                '&::before': {
+                  content: '""',
+                  width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,
+                  height: rem(3),
+                  borderTopLeftRadius: rem(3),
+                  borderTopRightRadius: rem(3),
+                  bg: color,
+                  position: 'absolute',
+                  transformOrigin: 'center',
+                  bottom: 0,
+                  left: '50%',
+                  transition: `inherit`,
+                  transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`,
+                },
+              }),
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/TabIndicator/context.ts

@@ -1,13 +1,13 @@
-import type { MutableRefObject } from 'react';
-import { createContext, useContext } from 'react';
-
-// TabIndicator Component
-export interface TabIndicatorContextProps {
-  currentIndicator: MutableRefObject<HTMLSpanElement | null>;
-}
-
-const TabIndicatorContext = createContext<TabIndicatorContextProps>({
-  currentIndicator: { current: null },
-});
-export const { Provider: TabIndicatorProvider } = TabIndicatorContext;
-export const useTabIndicatorContext = () => useContext(TabIndicatorContext);
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
+
+// TabIndicator Component
+export interface TabIndicatorContextProps {
+  currentIndicator: MutableRefObject<HTMLSpanElement | null>;
+}
+
+const TabIndicatorContext = createContext<TabIndicatorContextProps>({
+  currentIndicator: { current: null },
+});
+export const { Provider: TabIndicatorProvider } = TabIndicatorContext;
+export const useTabIndicatorContext = () => useContext(TabIndicatorContext);

package/src/TabIndicator/index.ts

@@ -1,2 +1,2 @@
-export * from './TabIndicator';
-export * from './context';
+export * from './TabIndicator';
+export * from './context';