@idealyst/components 1.0.83 → 1.0.84

package/src/TabBar/TabBar.styles.tsx

@@ -0,0 +1,399 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { TabBarPillMode, TabBarSizeVariant, TabBarType } from './types';
+
+type TabBarContainerVariants = {
+    type: TabBarType;
+    size: TabBarSizeVariant;
+    pillMode: TabBarPillMode;
+}
+
+type TabBarTabVariants = {
+    size: TabBarSizeVariant;
+    type: TabBarType;
+    active: boolean;
+    disabled: boolean;
+    pillMode: TabBarPillMode;
+}
+
+type TabBarLabelVariants = {
+    size: TabBarSizeVariant;
+    type: TabBarType;
+    active: boolean;
+    disabled: boolean;
+    pillMode: TabBarPillMode;
+}
+
+type TabBarIndicatorVariants = {
+    type: TabBarType;
+    pillMode: TabBarPillMode;
+}
+
+/**
+ * Create compound variants for container
+ */
+function createContainerCompoundVariants(theme: Theme): CompoundVariants<keyof TabBarContainerVariants> {
+    return [
+        {
+            type: 'pills',
+            pillMode: 'light',
+            styles: {
+                backgroundColor: theme.colors.surface.secondary,
+            },
+        },
+        {
+            type: 'pills',
+            pillMode: 'dark',
+            styles: {
+                backgroundColor: theme.colors.surface.inverse,
+            },
+        },
+    ];
+}
+
+/**
+ * Create size variants for tab
+ */
+function createTabSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'tabBar', (size) => ({
+        fontSize: size.fontSize,
+        padding: size.padding,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+/**
+ * Create compound variants for tab
+ */
+function createTabCompoundVariants(theme: Theme): CompoundVariants<keyof TabBarTabVariants> {
+    return [
+        // Pills variant - compact padding for all sizes
+        {
+            type: 'pills',
+            size: 'xs',
+            styles: {
+                paddingVertical: 2,
+                paddingHorizontal: 10,
+            },
+        },
+        {
+            type: 'pills',
+            size: 'sm',
+            styles: {
+                paddingVertical: 4,
+                paddingHorizontal: 12,
+            },
+        },
+        {
+            type: 'pills',
+            size: 'md',
+            styles: {
+                paddingVertical: 6,
+                paddingHorizontal: 16,
+            },
+        },
+        {
+            type: 'pills',
+            size: 'lg',
+            styles: {
+                paddingVertical: 8,
+                paddingHorizontal: 20,
+            },
+        },
+        {
+            type: 'pills',
+            size: 'xl',
+            styles: {
+                paddingVertical: 10,
+                paddingHorizontal: 24,
+            },
+        },
+        // Pills variant - active text color
+        {
+            type: 'pills',
+            active: true,
+            styles: {
+                color: theme.intents.primary.contrast,
+            },
+        },
+        // Underline variant - active text color
+        {
+            type: 'underline',
+            active: true,
+            styles: {
+                color: theme.intents.primary.primary,
+            },
+        },
+    ] as const;
+}
+
+/**
+ * Create size variants for label
+ */
+function createLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'tabBar', (size) => ({
+        fontSize: size.fontSize,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+/**
+ * Create compound variants for label
+ */
+function createLabelCompoundVariants(theme: Theme): CompoundVariants<keyof TabBarLabelVariants> {
+    return [
+        // Pills light mode - light text on active (dark pill)
+        {
+            type: 'pills',
+            pillMode: 'light',
+            active: true,
+            styles: {
+                color: theme.colors.text.primary,
+            },
+        },
+        // Pills dark mode - dark text on active (light pill)
+        {
+            type: 'pills',
+            pillMode: 'dark',
+            active: true,
+            styles: {
+                color: theme.colors.text.primary,
+            },
+        },
+        // Underline variant - active text color
+        {
+            type: 'underline',
+            active: true,
+            styles: {
+                color: theme.intents.primary.primary,
+            },
+        },
+    ] as const;
+}
+
+/**
+ * Create compound variants for indicator
+ */
+function createIndicatorCompoundVariants(theme: Theme): CompoundVariants<keyof TabBarIndicatorVariants> {
+    return [
+        // Pills light mode - darker pill
+        {
+            type: 'pills',
+            pillMode: 'light',
+            styles: {
+                backgroundColor: theme.colors.surface.tertiary,
+            },
+        },
+        // Pills dark mode - lighter pill
+        {
+            type: 'pills',
+            pillMode: 'dark',
+            styles: {
+                backgroundColor: theme.colors.surface.secondary,
+            },
+        },
+    ] as const;
+}
+
+const createContainerStyles = (theme: Theme) => {
+    return {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 0,
+        position: 'relative',
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: theme.colors.border.primary,
+        variants: {
+            type: {
+                standard: {},
+                pills: {
+                    borderBottomWidth: 0,
+                    padding: 4,
+                    gap: 4,
+                    backgroundColor: theme.colors.surface.secondary,
+                    overflow: 'hidden',
+                    alignSelf: 'flex-start',
+                },
+                underline: {},
+            },
+            size: {
+                xs: {},
+                sm: {},
+                md: {},
+                lg: {},
+                xl: {},
+            },
+            pillMode: {
+                light: {},
+                dark: {},
+            },
+        } as const,
+        compoundVariants: createContainerCompoundVariants(theme),
+    } as const;
+}
+
+const createTabStyles = (theme: Theme) => {
+    return {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: '500',
+        color: theme.colors.text.secondary,
+        position: 'relative',
+        zIndex: 2,
+        backgroundColor: 'transparent',
+        variants: {
+            size: createTabSizeVariants(theme),
+            type: {
+                standard: {},
+                pills: {
+                    borderRadius: 9999,
+                    marginRight: 0,
+                    backgroundColor: 'transparent',
+                },
+                underline: {},
+            },
+            active: {
+                true: {
+                    color: theme.colors.text.primary,
+                },
+                false: {},
+            },
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
+                },
+                false: {
+                    _web: {
+                        _hover: {
+                            color: theme.colors.text.primary,
+                        },
+                    },
+                },
+            },
+            pillMode: {
+                light: {},
+                dark: {},
+            },
+        } as const,
+        compoundVariants: createTabCompoundVariants(theme),
+        _web: {
+            border: 'none',
+            cursor: 'pointer',
+            outline: 'none',
+            transition: 'color 0.2s ease',
+        },
+    } as const;
+}
+
+const createTabLabelStyles = (theme: Theme) => {
+    return {
+        position: 'relative',
+        zIndex: 3,
+        fontWeight: '500',
+        color: theme.colors.text.secondary,
+        variants: {
+            size: createLabelSizeVariants(theme),
+            type: {
+                standard: {},
+                pills: {},
+                underline: {},
+            },
+            active: {
+                true: {
+                    color: theme.colors.text.primary,
+                },
+                false: {},
+            },
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                },
+                false: {},
+            },
+            pillMode: {
+                light: {},
+                dark: {},
+            },
+        },
+        compoundVariants: createLabelCompoundVariants(theme),
+    } as const;
+}
+
+const createIndicatorStyles = (theme: Theme) => {
+    return {
+        position: 'absolute',
+        pointerEvents: 'none',
+        zIndex: 1,
+        variants: {
+            type: {
+                standard: {
+                    bottom: -1,
+                    height: 2,
+                    backgroundColor: theme.intents.primary.primary,
+                },
+                pills: {
+                    borderRadius: 9999,
+                    bottom: 4,
+                    top: 4,
+                    left: 0,
+                },
+                underline: {
+                    bottom: -1,
+                    height: 2,
+                    backgroundColor: theme.intents.primary.primary,
+                },
+            },
+            pillMode: {
+                light: {},
+                dark: {},
+            },
+        },
+        compoundVariants: createIndicatorCompoundVariants(theme),
+        _web: {
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+    } as const;
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const tabBarStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: createContainerStyles(theme),
+        tab: createTabStyles(theme),
+        tabLabel: createTabLabelStyles(theme),
+        indicator: createIndicatorStyles(theme),
+    };
+});
+
+// Export individual style sheets for backwards compatibility
+export const tabBarContainerStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: createContainerStyles(theme),
+    } as const;
+});
+
+export const tabBarTabStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        tab: createTabStyles(theme),
+    } as const;
+});
+
+export const tabBarLabelStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        tabLabel: createTabLabelStyles(theme),
+    } as const;
+});
+
+export const tabBarIndicatorStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        indicator: createIndicatorStyles(theme),
+    } as const;
+});

package/src/TabBar/TabBar.web.tsx

@@ -0,0 +1,205 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import {
+  tabBarContainerStyles,
+  tabBarTabStyles,
+  tabBarLabelStyles,
+  tabBarIndicatorStyles
+} from './TabBar.styles';
+import type { TabBarProps, TabBarItem } from './types';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+interface TabProps {
+  item: TabBarItem;
+  isActive: boolean;
+  onClick: () => void;
+  size: TabBarProps['size'];
+  type: TabBarProps['type'];
+  pillMode: TabBarProps['pillMode'];
+  testID?: string;
+  tabRef: (el: HTMLButtonElement | null) => void;
+}
+
+const Tab: React.FC<TabProps> = ({
+  item,
+  isActive,
+  onClick,
+  size,
+  type,
+  pillMode,
+  testID,
+  tabRef,
+}) => {
+  // Apply tab and label types for this specific tab
+  tabBarTabStyles.useVariants({
+    size,
+    type,
+    active: isActive,
+    disabled: Boolean(item.disabled),
+    pillMode,
+  });
+  tabBarLabelStyles.useVariants({
+    size,
+    type,
+    pillMode,
+    active: isActive,
+    disabled: Boolean(item.disabled),
+  });
+
+  const tabProps = getWebProps([tabBarTabStyles.tab]);
+  const labelProps = getWebProps([tabBarLabelStyles.tabLabel]);
+
+  // Merge refs from getWebProps with our tracking ref
+  const mergedRef = useMergeRefs<HTMLButtonElement>(
+    tabProps.ref as React.Ref<HTMLButtonElement>,
+    tabRef
+  );
+
+  return (
+    <button
+      {...tabProps}
+      ref={mergedRef}
+      onClick={onClick}
+      disabled={item.disabled}
+      role="tab"
+      aria-selected={isActive}
+      aria-disabled={item.disabled}
+      data-testid={`${testID}-tab-${item.value}`}
+    >
+      <span {...labelProps}>{item.label}</span>
+    </button>
+  );
+};
+
+const TabBar: React.FC<TabBarProps> = ({
+  items,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  type = 'standard',
+  size = 'md',
+  pillMode = 'light',
+  style,
+  testID,
+}) => {
+  const firstItemValue = items[0]?.value || '';
+  const [internalValue, setInternalValue] = useState(defaultValue || firstItemValue);
+  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  const updateIndicator = () => {
+    const activeButton = tabRefs.current[value];
+    const container = containerRef.current;
+
+    if (activeButton && container) {
+      const containerRect = container.getBoundingClientRect();
+      const buttonRect = activeButton.getBoundingClientRect();
+
+      const newStyle = {
+        left: buttonRect.left - containerRect.left,
+        width: buttonRect.width,
+      };
+      setIndicatorStyle(newStyle);
+    }
+  };
+
+  // Update indicator when value changes
+  useEffect(() => {
+    updateIndicator();
+  }, [value]);
+
+  // Update indicator on mount and window resize
+  useEffect(() => {
+    // Small delay to ensure DOM is ready
+    const timer = setTimeout(updateIndicator, 0);
+    window.addEventListener('resize', updateIndicator);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('resize', updateIndicator);
+    };
+  }, []);
+
+  // Update indicator when items change
+  useEffect(() => {
+    updateIndicator();
+  }, [items]);
+
+  const handleTabClick = (itemValue: string, disabled?: boolean) => {
+    if (disabled) return;
+
+    if (controlledValue === undefined) {
+      setInternalValue(itemValue);
+    }
+
+    onChange?.(itemValue);
+  };
+
+  // Apply container and indicator types
+  tabBarContainerStyles.useVariants({ type, size, pillMode });
+  const containerProps = getWebProps([tabBarContainerStyles.container, style as any]);
+
+  tabBarIndicatorStyles.useVariants({ type, pillMode });
+  const indicatorProps = getWebProps([tabBarIndicatorStyles.indicator]);
+
+  // Merge container ref with getWebProps ref
+  const mergedContainerRef = useMergeRefs<HTMLDivElement>(
+    containerProps.ref as React.Ref<HTMLDivElement>,
+    containerRef
+  );
+
+  // For pills type, calculate height from parent
+  const indicatorInlineStyle: React.CSSProperties = {
+    left: `${indicatorStyle.left}px`,
+    width: `${indicatorStyle.width}px`,
+  };
+
+  // For pills type, use calc() to set height based on top/bottom
+  if (type === 'pills') {
+    indicatorInlineStyle.height = 'calc(100% - 8px)'; // 100% minus top(4px) + bottom(4px)
+  }
+
+  return (
+    <div
+      {...containerProps}
+      ref={mergedContainerRef}
+      role="tablist"
+      data-testid={testID}
+    >
+      {/* Sliding indicator */}
+      <div
+        {...indicatorProps}
+        style={indicatorInlineStyle}
+      />
+
+      {items.map((item) => {
+        const isActive = value === item.value;
+
+        return (
+          <Tab
+            key={item.value}
+            item={item}
+            isActive={isActive}
+            onClick={() => handleTabClick(item.value, item.disabled)}
+            size={size}
+            type={type}
+            pillMode={pillMode}
+            testID={testID}
+            tabRef={(el) => {
+              tabRefs.current[item.value] = el;
+              // Update indicator when active tab ref is set
+              if (el && isActive) {
+                requestAnimationFrame(() => updateIndicator());
+              }
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default TabBar;

package/src/TabBar/index.native.tsx

@@ -0,0 +1,3 @@
+export { default } from './TabBar.native';
+export { default as TabBar } from './TabBar.native';
+export * from './types';

package/src/TabBar/index.ts

@@ -0,0 +1,3 @@
+export { default } from './TabBar.web';
+export { default as TabBar } from './TabBar.web';
+export * from './types';

package/src/TabBar/index.web.tsx

@@ -0,0 +1,3 @@
+export { default } from './TabBar.web';
+export { default as TabBar } from './TabBar.web';
+export * from './types';

package/src/TabBar/types.ts

@@ -0,0 +1,26 @@
+import { Size } from '@idealyst/theme';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type TabBarSizeVariant = Size;
+export type TabBarType = 'standard' | 'pills' | 'underline';
+export type TabBarPillMode = 'light' | 'dark';
+
+export interface TabBarItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface TabBarProps {
+  items: TabBarItem[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  type?: TabBarType;
+  size?: TabBarSizeVariant;
+  /** Mode for pills variant: 'light' for light backgrounds (dark pill), 'dark' for dark backgrounds (light pill) */
+  pillMode?: TabBarPillMode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}