@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/components/tabs/tabs.styles.ts

@@ -0,0 +1,168 @@
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+const root = tv({
+  base: 'flex-col gap-2',
+});
+
+const list = tv({
+  base: 'self-start flex-row items-center gap-1',
+  variants: {
+    variant: {
+      primary: 'p-[3px] rounded-3xl bg-default',
+      secondary: 'p-0 border-b border-border',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    isScrollView: false,
+  },
+});
+
+const scrollView = tv({
+  base: '',
+  variants: {
+    variant: {
+      primary: '-my-[3px] rounded-3xl',
+      secondary: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+  },
+});
+
+const scrollViewContentContainer = tv({
+  base: '',
+  variants: {
+    variant: {
+      primary: 'py-[3px] px-px',
+      secondary: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+  },
+});
+
+const trigger = tv({
+  base: 'flex-row items-center justify-center px-3 py-1.5 gap-1.5',
+  variants: {
+    isDisabled: {
+      true: 'opacity-disabled pointer-events-none',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+  },
+});
+
+const label = tv({
+  base: 'text-base font-medium',
+  variants: {
+    isSelected: {
+      true: 'text-segment-foreground',
+      false: 'text-muted',
+    },
+  },
+});
+
+/**
+ * Indicator style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following properties are animated and cannot be overridden using Tailwind classes:
+ * - `width` - Animated for indicator width transitions when switching tabs
+ * - `height` - Animated for indicator height transitions when switching tabs
+ * - `translateX` - Animated for indicator position transitions when switching tabs (uses translateX for GPU-accelerated performance)
+ * - `opacity` - Animated for indicator visibility transitions (0 when no active tab, 1 when active tab is selected)
+ *
+ * To customize these properties, use the `animation` prop on `Tabs.Indicator`:
+ * ```tsx
+ * <Tabs.Indicator
+ *   animation={{
+ *     width: { type: 'spring', config: { stiffness: 1200, damping: 120 } },
+ *     height: { type: 'spring', config: { stiffness: 1200, damping: 120 } },
+ *     translateX: { type: 'timing', config: { duration: 200 } }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Tabs.Indicator`.
+ */
+const indicator = tv({
+  base: 'absolute left-0',
+  variants: {
+    variant: {
+      primary: 'rounded-3xl shadow-sm shadow-surface/25 bg-segment',
+      secondary: 'bottom-0 border-b-2 border-accent',
+    },
+    isScrollView: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'primary',
+      isScrollView: true,
+      className: 'top-[3px]',
+    },
+  ],
+  defaultVariants: {
+    variant: 'primary',
+    isScrollView: false,
+  },
+});
+
+/**
+ * Separator style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following properties are animated and cannot be overridden using Tailwind classes:
+ * - `opacity` - Animated for separator visibility transitions (0 when not between values, 1 when between values)
+ *
+ * To customize these properties, use the `animation` prop on `Tabs.Separator`:
+ * ```tsx
+ * <Tabs.Separator
+ *   betweenValues={["tab1", "tab2"]}
+ *   animation={{
+ *     opacity: { value: [0, 1], timingConfig: { duration: 200 } }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Tabs.Separator`.
+ */
+const separator = tv({
+  base: 'w-px h-3/5 bg-separator/30 self-center',
+});
+
+const content = tv({
+  base: '',
+});
+
+export const tabsClassNames = combineStyles({
+  root,
+  list,
+  scrollView,
+  scrollViewContentContainer,
+  trigger,
+  label,
+  indicator,
+  separator,
+  content,
+});
+
+export const tabsStyleSheet = StyleSheet.create({
+  listRoot: {
+    borderCurve: 'continuous',
+  },
+  triggerRoot: {
+    borderCurve: 'continuous',
+  },
+});

package/lib/__templates__/expo/client/heroui/components/tabs/tabs.tsx

@@ -0,0 +1,445 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  ScrollView,
+  useWindowDimensions,
+  type LayoutChangeEvent,
+  type ViewStyle,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import { AnimationSettingsProvider } from '../../helpers/internal/contexts';
+import * as TabsPrimitives from '../../primitives/tabs';
+import type * as TabsPrimitivesTypes from '../../primitives/tabs/tabs.types';
+import {
+  useTabsIndicatorAnimation,
+  useTabsRootAnimation,
+  useTabsSeparatorAnimation,
+} from './tabs.animation';
+import { DISPLAY_NAME } from './tabs.constants';
+import { MeasurementsContext, useTabsMeasurements } from './tabs.context';
+import { tabsClassNames, tabsStyleSheet } from './tabs.styles';
+import type {
+  ItemMeasurements,
+  TabsContentProps,
+  TabsIndicatorProps,
+  TabsLabelProps,
+  TabsListProps,
+  TabsProps,
+  TabsScrollViewProps,
+  TabsSeparatorProps,
+  TabsTriggerProps,
+  TabsTriggerRenderProps,
+} from './tabs.types';
+
+const AnimatedIndicator = Animated.createAnimatedComponent(
+  TabsPrimitives.Indicator
+);
+
+const useTabs = TabsPrimitives.useRootContext;
+const useTabsTrigger = TabsPrimitives.useTriggerContext;
+
+// --------------------------------------------------
+
+const TabsRoot = forwardRef<TabsPrimitivesTypes.RootRef, TabsProps>(
+  (props, ref) => {
+    const {
+      children,
+      value,
+      onValueChange,
+      className,
+      variant = 'primary',
+      animation,
+      ...restProps
+    } = props;
+
+    const [measurements, setMeasurementsState] = useState<
+      Record<string, ItemMeasurements>
+    >({});
+    const [isScrollView, setIsScrollView] = useState(false);
+
+    const setMeasurements = useCallback(
+      (key: string, newMeasurements: ItemMeasurements) => {
+        setMeasurementsState((prev) => ({
+          ...prev,
+          [key]: newMeasurements,
+        }));
+      },
+      []
+    );
+
+    const { isAllAnimationsDisabled } = useTabsRootAnimation({ animation });
+
+    const animationSettingsContextValue = useMemo(
+      () => ({
+        isAllAnimationsDisabled,
+      }),
+      [isAllAnimationsDisabled]
+    );
+
+    const rootClassName = tabsClassNames.root({ className });
+
+    return (
+      <AnimationSettingsProvider value={animationSettingsContextValue}>
+        <MeasurementsContext.Provider
+          value={{
+            measurements,
+            setMeasurements,
+            variant,
+            isScrollView,
+            setIsScrollView,
+          }}
+        >
+          <TabsPrimitives.Root
+            ref={ref}
+            value={value}
+            onValueChange={onValueChange}
+            className={rootClassName}
+            {...restProps}
+          >
+            {children}
+          </TabsPrimitives.Root>
+        </MeasurementsContext.Provider>
+      </AnimationSettingsProvider>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const TabsList = forwardRef<TabsPrimitivesTypes.ListRef, TabsListProps>(
+  (props, ref) => {
+    const { children, className, style, ...restProps } = props;
+
+    const { variant, setIsScrollView } = useTabsMeasurements();
+
+    const handleLayout = useCallback(() => {
+      const childrenArray = Children.toArray(children);
+      const hasScrollView =
+        childrenArray.length === 1 &&
+        isValidElement(childrenArray[0]) &&
+        (childrenArray[0].type as any)?.displayName ===
+          DISPLAY_NAME.SCROLL_VIEW;
+      setIsScrollView(hasScrollView);
+    }, [children, setIsScrollView]);
+
+    const listClassName = tabsClassNames.list({ variant, className });
+
+    return (
+      <TabsPrimitives.List
+        ref={ref}
+        className={listClassName}
+        style={[tabsStyleSheet.listRoot, style]}
+        onLayout={handleLayout}
+        {...restProps}
+      >
+        {children}
+      </TabsPrimitives.List>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const TabsScrollView = forwardRef<ScrollView, TabsScrollViewProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      contentContainerClassName,
+      showsHorizontalScrollIndicator = false,
+      scrollAlign = 'center',
+      ...restProps
+    } = props;
+
+    const { value } = useTabs();
+    const { measurements, variant } = useTabsMeasurements();
+    const { width: screenWidth } = useWindowDimensions();
+
+    const scrollViewClassName = tabsClassNames.scrollView({
+      variant,
+      className,
+    });
+    const contentContainerClassNameValue =
+      tabsClassNames.scrollViewContentContainer({
+        variant,
+        className: contentContainerClassName,
+      });
+
+    const scrollRef = useRef<ScrollView>(null);
+
+    useEffect(() => {
+      if (scrollAlign === 'none' || !measurements[value]) return;
+
+      const itemMeasurement = measurements[value];
+      let scrollToX = 0;
+
+      if (scrollAlign === 'start') {
+        scrollToX = itemMeasurement.x;
+      } else if (scrollAlign === 'center') {
+        const itemCenter = itemMeasurement.x + itemMeasurement.width / 2;
+        scrollToX = itemCenter - screenWidth / 2;
+      } else if (scrollAlign === 'end') {
+        scrollToX = itemMeasurement.x + itemMeasurement.width - screenWidth;
+      }
+
+      scrollRef.current?.scrollTo({
+        x: Math.max(0, scrollToX),
+        animated: true,
+      });
+    }, [value, measurements, scrollAlign, screenWidth]);
+
+    return (
+      <ScrollView
+        ref={(instance) => {
+          scrollRef.current = instance;
+          if (typeof ref === 'function') {
+            ref(instance);
+          } else if (ref) {
+            ref.current = instance;
+          }
+        }}
+        horizontal
+        showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+        className={scrollViewClassName}
+        contentContainerClassName={contentContainerClassNameValue}
+        {...restProps}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const TabsTrigger = forwardRef<
+  TabsPrimitivesTypes.TriggerRef,
+  TabsTriggerProps
+>((props, ref) => {
+  const {
+    children,
+    value,
+    isDisabled = false,
+    className,
+    style,
+    ...restProps
+  } = props;
+  const { setMeasurements } = useTabsMeasurements();
+  const { value: rootValue } = useTabs();
+
+  const isSelected = rootValue === value;
+
+  const triggerClassName = tabsClassNames.trigger({ isDisabled, className });
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width, height, x } = event.nativeEvent.layout;
+      setMeasurements(value, { width, height, x });
+    },
+    [value, setMeasurements]
+  );
+
+  const renderProps: TabsTriggerRenderProps = {
+    isSelected,
+    value,
+    isDisabled,
+  };
+
+  const content =
+    typeof children === 'function' ? children(renderProps) : children;
+
+  return (
+    <TabsPrimitives.Trigger
+      ref={ref}
+      value={value}
+      disabled={isDisabled}
+      className={triggerClassName}
+      style={[tabsStyleSheet.triggerRoot, style as ViewStyle]}
+      onLayout={handleLayout}
+      {...restProps}
+    >
+      {content}
+    </TabsPrimitives.Trigger>
+  );
+});
+
+// --------------------------------------------------
+
+const TabsLabel = forwardRef<TabsPrimitivesTypes.LabelRef, TabsLabelProps>(
+  (props, ref) => {
+    const { children, className, ...restProps } = props;
+    const { isSelected } = useTabsTrigger();
+
+    const labelClassName = tabsClassNames.label({ isSelected, className });
+
+    return (
+      <TabsPrimitives.Label ref={ref} className={labelClassName} {...restProps}>
+        {children}
+      </TabsPrimitives.Label>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const TabsIndicator = forwardRef<
+  TabsPrimitivesTypes.IndicatorRef,
+  TabsIndicatorProps
+>((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    animation,
+    isAnimatedStyleActive = true,
+    ...restProps
+  } = props;
+
+  const { variant, isScrollView } = useTabsMeasurements();
+
+  const { rContainerStyle } = useTabsIndicatorAnimation({
+    animation,
+  });
+
+  const indicatorClassName = tabsClassNames.indicator({
+    variant,
+    isScrollView,
+    className,
+  });
+
+  const indicatorStyle = isAnimatedStyleActive
+    ? [rContainerStyle, style]
+    : style;
+
+  return (
+    <AnimatedIndicator
+      ref={ref}
+      className={indicatorClassName}
+      style={indicatorStyle}
+      {...restProps}
+    >
+      {children}
+    </AnimatedIndicator>
+  );
+});
+
+// --------------------------------------------------
+
+const TabsSeparator = forwardRef<Animated.View, TabsSeparatorProps>(
+  (props, ref) => {
+    const {
+      betweenValues,
+      isAlwaysVisible = false,
+      animation,
+      isAnimatedStyleActive = true,
+      className,
+      style,
+      ...restProps
+    } = props;
+
+    const { rContainerStyle } = useTabsSeparatorAnimation({
+      animation,
+      betweenValues,
+      isAlwaysVisible,
+    });
+
+    const separatorClassName = tabsClassNames.separator({ className });
+
+    const separatorStyle = isAnimatedStyleActive
+      ? [rContainerStyle, style]
+      : style;
+
+    return (
+      <Animated.View
+        ref={ref}
+        className={separatorClassName}
+        style={separatorStyle}
+        {...restProps}
+      />
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const TabsContent = forwardRef<
+  TabsPrimitivesTypes.ContentRef,
+  TabsContentProps
+>((props, ref) => {
+  const { children, value, className, ...restProps } = props;
+
+  const contentClassName = tabsClassNames.content({ className });
+
+  return (
+    <TabsPrimitives.Content
+      ref={ref}
+      value={value}
+      className={contentClassName}
+      {...restProps}
+    >
+      {children}
+    </TabsPrimitives.Content>
+  );
+});
+
+// --------------------------------------------------
+
+TabsRoot.displayName = DISPLAY_NAME.ROOT;
+TabsList.displayName = DISPLAY_NAME.LIST;
+TabsScrollView.displayName = DISPLAY_NAME.SCROLL_VIEW;
+TabsTrigger.displayName = DISPLAY_NAME.TRIGGER;
+TabsLabel.displayName = DISPLAY_NAME.LABEL;
+TabsIndicator.displayName = DISPLAY_NAME.INDICATOR;
+TabsSeparator.displayName = DISPLAY_NAME.SEPARATOR;
+TabsContent.displayName = DISPLAY_NAME.CONTENT;
+
+/**
+ * Compound Tabs component with sub-components
+ *
+ * @component Tabs - Main container for the tabs system
+ *
+ * @component Tabs.List - Container for tab triggers
+ *
+ * @component Tabs.ScrollView - Scrollable wrapper for tab triggers
+ *
+ * @component Tabs.Trigger - Individual tab button
+ *
+ * @component Tabs.Label - Label text for tab triggers
+ *
+ * @component Tabs.Indicator - Visual indicator for active tab
+ *
+ * @component Tabs.Separator - Visual separator between tabs
+ *
+ * @component Tabs.Content - Content panel for each tab
+ *
+ * Props flow from Tabs to sub-components via context.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/tabs
+ */
+const Tabs = Object.assign(TabsRoot, {
+  /** Container for tab triggers */
+  List: TabsList,
+  /** Scrollable wrapper for tab triggers */
+  ScrollView: TabsScrollView,
+  /** Individual tab button */
+  Trigger: TabsTrigger,
+  /** Label text for tab triggers */
+  Label: TabsLabel,
+  /** Visual indicator for active tab */
+  Indicator: TabsIndicator,
+  /** Visual separator between tabs */
+  Separator: TabsSeparator,
+  /** Content panel for each tab */
+  Content: TabsContent,
+});
+
+export { useTabs, useTabsMeasurements, useTabsTrigger };
+export default Tabs;