@basic-ui/material 1.0.0-alpha.52 → 1.0.0-alpha.54

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 | null>(null);
+
+    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';

package/src/Table/context.ts

@@ -1,6 +1,6 @@
-import { createContext, useContext } from 'react';
-
-// TableHead Component
-const TableHeadContext = createContext<boolean>(false);
-export const { Provider: TableHeadProvider } = TableHeadContext;
-export const useTableHeadContext = () => useContext(TableHeadContext);
+import { createContext, useContext } from 'react';
+
+// TableHead Component
+const TableHeadContext = createContext<boolean>(false);
+export const { Provider: TableHeadProvider } = TableHeadContext;
+export const useTableHeadContext = () => useContext(TableHeadContext);

package/src/Text/LoremIpsum.tsx

@@ -1,18 +1,18 @@
-import type { FC } from 'react';
-
-import { Text } from '.';
-
-const phrase =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
-  const phrases = [];
-  for (let i = 0; i < count; i++) {
-    phrases.push(
-      <Text variant="body-medium" key={`p-${i}`} m={'1.2em'}>
-        {phrase}
-      </Text>
-    );
-  }
-  return <>{phrases}</>;
-};
+import type { FC } from 'react';
+
+import { Text } from '.';
+
+const phrase =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
+  const phrases = [];
+  for (let i = 0; i < count; i++) {
+    phrases.push(
+      <Text variant="body-medium" key={`p-${i}`} m={'1.2em'}>
+        {phrase}
+      </Text>
+    );
+  }
+  return <>{phrases}</>;
+};