panelui-native 0.2.0 → 0.4.0

package/src/components/label/index.tsx

@@ -0,0 +1,128 @@
+/**
+ * Label — text that names a form field.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/label/ (root +
+ * Label.Text anatomy, string children auto-wrapping, the required asterisk,
+ * and the isInvalid / isDisabled recolouring).
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { Text, type TextProps } from '../../primitives/text';
+
+const labelVariants = tv({
+  slots: {
+    root: 'flex-row items-center gap-1',
+    text: 'text-sm font-medium text-foreground',
+    asterisk: 'text-sm font-medium text-destructive',
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        root: 'opacity-[0.64]',
+        asterisk: 'text-muted-foreground',
+      },
+    },
+    isInvalid: {
+      true: { text: 'text-destructive' },
+    },
+  },
+});
+
+interface LabelState {
+  isRequired: boolean;
+  isInvalid: boolean;
+  isDisabled: boolean;
+}
+
+const LabelContext = createContext<LabelState>({
+  isRequired: false,
+  isInvalid: false,
+  isDisabled: false,
+});
+
+export interface LabelProps extends ViewProps {
+  className?: string;
+  /** Appends an asterisk marking the field as required. */
+  isRequired?: boolean;
+  /** Recolours the label to signal a validation error. */
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+const LabelRoot = forwardRef<View, LabelProps>(
+  (
+    {
+      className,
+      isRequired = false,
+      isInvalid = false,
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { root } = labelVariants({ isDisabled, isInvalid });
+    const state = useMemo(
+      () => ({ isRequired, isInvalid, isDisabled }),
+      [isRequired, isInvalid, isDisabled]
+    );
+
+    return (
+      <LabelContext.Provider value={state}>
+        <View
+          ref={ref}
+          className={root({ className })}
+          accessibilityState={{ disabled: isDisabled }}
+          {...props}
+        >
+          {/* Bare strings are the common case — wrap them so callers don't have to. */}
+          {typeof children === 'string' ? <LabelText>{children}</LabelText> : children}
+        </View>
+      </LabelContext.Provider>
+    );
+  }
+);
+LabelRoot.displayName = 'Label';
+
+export interface LabelTextProps extends TextProps {
+  className?: string;
+  /** Classes for the required asterisk. */
+  asteriskClassName?: string;
+}
+
+const LabelText = forwardRef<RNText, LabelTextProps>(
+  ({ className, asteriskClassName, children, ...props }, ref) => {
+    const { isRequired, isInvalid, isDisabled } = useContext(LabelContext);
+    const { text, asterisk } = labelVariants({ isDisabled, isInvalid });
+
+    return (
+      <>
+        <Text ref={ref} className={text({ className })} {...props}>
+          {children}
+        </Text>
+        {isRequired ? (
+          <Text
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            className={asterisk({ className: asteriskClassName })}
+          >
+            *
+          </Text>
+        ) : null}
+      </>
+    );
+  }
+);
+LabelText.displayName = 'Label.Text';
+
+export const Label = Object.assign(LabelRoot, {
+  Text: LabelText,
+});

package/src/components/progress/index.tsx

@@ -0,0 +1,147 @@
+import { forwardRef, useEffect } from 'react';
+import { View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const SPRING = { damping: 20, stiffness: 180, mass: 0.6 } as const;
+/** Fraction of the track covered by the sliding bar in indeterminate mode. */
+const INDETERMINATE_WIDTH = 0.4;
+
+const progressVariants = tv({
+  slots: {
+    track: 'w-full overflow-hidden rounded-full',
+    indicator: 'h-full rounded-full',
+  },
+  variants: {
+    color: {
+      primary: { track: 'bg-primary/16', indicator: 'bg-primary' },
+      success: { track: 'bg-success/16', indicator: 'bg-success' },
+      warning: { track: 'bg-warning/16', indicator: 'bg-warning' },
+      destructive: { track: 'bg-destructive/16', indicator: 'bg-destructive' },
+      info: { track: 'bg-info/16', indicator: 'bg-info' },
+    },
+    size: {
+      sm: { track: 'h-1.5' },
+      md: { track: 'h-2' },
+      lg: { track: 'h-3' },
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: 'md',
+  },
+});
+
+type ProgressVariantProps = VariantProps<typeof progressVariants>;
+
+export interface ProgressProps
+  extends Omit<ViewProps, 'children'>,
+    ProgressVariantProps {
+  className?: string;
+  /** Progress value, 0–100. Ignored when `indeterminate` is set. */
+  value?: number;
+  /** Show a looping animation for unknown-duration work. */
+  indeterminate?: boolean;
+  /** Extra classes for the moving indicator. */
+  indicatorClassName?: string;
+}
+
+function clamp(value: number) {
+  'worklet';
+  if (value < 0) return 0;
+  if (value > 100) return 100;
+  return value;
+}
+
+/**
+ * Determinate or indeterminate progress bar. The fill width (determinate) and
+ * the sliding bar (indeterminate) are both driven on the UI thread, so updates
+ * never re-render past the value change itself.
+ */
+export const Progress = forwardRef<View, ProgressProps>(
+  (
+    {
+      className,
+      indicatorClassName,
+      value = 0,
+      indeterminate = false,
+      color,
+      size,
+      ...props
+    },
+    ref
+  ) => {
+    const slots = progressVariants({ color, size });
+    const trackWidth = useSharedValue(0);
+    const progress = useSharedValue(clamp(value) / 100);
+    const slide = useSharedValue(0);
+
+    const target = clamp(value) / 100;
+
+    useEffect(() => {
+      if (indeterminate) {
+        slide.value = withRepeat(
+          withTiming(1, { duration: 1100, easing: Easing.inOut(Easing.ease) }),
+          -1,
+          false
+        );
+        return () => cancelAnimation(slide);
+      }
+      progress.value = withSpring(target, SPRING);
+      return undefined;
+    }, [indeterminate, target, progress, slide]);
+
+    const onLayout = (event: LayoutChangeEvent) => {
+      trackWidth.value = event.nativeEvent.layout.width;
+    };
+
+    const determinateStyle = useAnimatedStyle(() => ({
+      width: trackWidth.value * progress.value,
+    }));
+
+    const indeterminateStyle = useAnimatedStyle(() => {
+      const barWidth = trackWidth.value * INDETERMINATE_WIDTH;
+      return {
+        width: barWidth,
+        transform: [
+          {
+            translateX: interpolate(
+              slide.value,
+              [0, 1],
+              [-barWidth, trackWidth.value]
+            ),
+          },
+        ],
+      };
+    });
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="progressbar"
+        accessibilityValue={
+          indeterminate ? undefined : { min: 0, max: 100, now: clamp(value) }
+        }
+        className={slots.track({ className })}
+        onLayout={onLayout}
+        {...props}
+      >
+        <Animated.View
+          style={indeterminate ? indeterminateStyle : determinateStyle}
+          className={slots.indicator({ className: indicatorClassName })}
+        />
+      </View>
+    );
+  }
+);
+
+Progress.displayName = 'Progress';

package/src/components/steps/index.tsx

@@ -0,0 +1,343 @@
+/**
+ * Steps — a stepper for multi-step flows.
+ *
+ * Adapted from: origin-space/originui apps/origin/registry/default/ui/stepper.tsx
+ * (the Stepper / Item / Trigger / Indicator / Title / Description / Separator
+ * anatomy, and the completed | active | inactive | loading state resolution).
+ *
+ * Upstream drives all styling through `data-*` attributes, which React Native
+ * has no equivalent for. Here the state is resolved in JS and passed down
+ * through context into `tv()` variants — the same approach Alert uses.
+ *
+ * Steps does not own your flow: it reflects whatever step your app says is
+ * active. Pass `value` to control it, or `defaultValue` to let it manage
+ * its own.
+ */
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type Text as RNText, type ViewProps } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { CheckIcon } from '../../icons';
+import { Text, type TextProps } from '../../primitives/text';
+import { Spinner } from '../spinner';
+
+export type StepState = 'active' | 'completed' | 'inactive' | 'loading';
+export type StepsOrientation = 'horizontal' | 'vertical';
+
+const stepsVariants = tv({
+  slots: {
+    root: '',
+    item: 'items-center',
+    trigger: 'flex-row items-center gap-3',
+    indicator: 'h-7 w-7 shrink-0 items-center justify-center rounded-full',
+    indicatorLabel: 'text-xs font-medium',
+    title: 'text-sm font-medium text-foreground',
+    description: 'text-sm text-muted-foreground',
+    separator: 'bg-muted',
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: 'w-full flex-row items-center',
+        item: 'flex-row',
+        separator: 'h-0.5 flex-1',
+      },
+      vertical: {
+        root: 'flex-col',
+        item: 'flex-col items-start',
+        separator: 'ml-3.5 h-8 w-0.5',
+      },
+    },
+    state: {
+      inactive: {
+        indicator: 'bg-muted',
+        indicatorLabel: 'text-muted-foreground',
+      },
+      active: {
+        indicator: 'bg-primary',
+        indicatorLabel: 'text-primary-foreground',
+      },
+      completed: {
+        indicator: 'bg-primary',
+        indicatorLabel: 'text-primary-foreground',
+        separator: 'bg-primary',
+      },
+      loading: {
+        indicator: 'bg-muted',
+        indicatorLabel: 'text-muted-foreground',
+      },
+    },
+    isDisabled: {
+      true: { trigger: 'opacity-[0.64]' },
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    state: 'inactive',
+  },
+});
+
+interface StepsContextValue {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+  orientation: StepsOrientation;
+}
+
+interface StepItemContextValue {
+  step: number;
+  state: StepState;
+  isDisabled: boolean;
+  isLoading: boolean;
+}
+
+const StepsContext = createContext<StepsContextValue | null>(null);
+const StepItemContext = createContext<StepItemContextValue | null>(null);
+
+function useSteps(component: string): StepsContextValue {
+  const context = useContext(StepsContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Steps>`);
+  }
+  return context;
+}
+
+function useStepItem(component: string): StepItemContextValue {
+  const context = useContext(StepItemContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Steps.Item>`);
+  }
+  return context;
+}
+
+export interface StepsProps extends ViewProps {
+  className?: string;
+  /** Active step when uncontrolled. */
+  defaultValue?: number;
+  /** Active step, controlled. */
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: StepsOrientation;
+  children?: ReactNode;
+}
+
+const StepsRoot = forwardRef<View, StepsProps>(
+  (
+    {
+      className,
+      defaultValue = 0,
+      value,
+      onValueChange,
+      orientation = 'horizontal',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalStep, setInternalStep] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const activeStep = isControlled ? value : internalStep;
+
+    const setActiveStep = useCallback(
+      (step: number) => {
+        if (!isControlled) setInternalStep(step);
+        onValueChange?.(step);
+      },
+      [isControlled, onValueChange]
+    );
+
+    const context = useMemo(
+      () => ({ activeStep, setActiveStep, orientation }),
+      [activeStep, setActiveStep, orientation]
+    );
+
+    const { root } = stepsVariants({ orientation });
+
+    return (
+      <StepsContext.Provider value={context}>
+        <View ref={ref} className={root({ className })} {...props}>
+          {children}
+        </View>
+      </StepsContext.Provider>
+    );
+  }
+);
+StepsRoot.displayName = 'Steps';
+
+export interface StepsItemProps extends ViewProps {
+  className?: string;
+  /** This item's position in the flow, zero-based by convention. */
+  step: number;
+  /** Force the completed state, regardless of the active step. */
+  completed?: boolean;
+  disabled?: boolean;
+  /** Shows a spinner in place of the number while this step is active. */
+  loading?: boolean;
+  children?: ReactNode;
+}
+
+const StepsItem = forwardRef<View, StepsItemProps>(
+  (
+    { className, step, completed = false, disabled = false, loading = false, children, ...props },
+    ref
+  ) => {
+    const { activeStep, orientation } = useSteps('Steps.Item');
+
+    const isLoading = loading && step === activeStep;
+    const state: StepState =
+      completed || step < activeStep
+        ? 'completed'
+        : step === activeStep
+          ? isLoading
+            ? 'loading'
+            : 'active'
+          : 'inactive';
+
+    const context = useMemo(
+      () => ({ step, state, isDisabled: disabled, isLoading }),
+      [step, state, disabled, isLoading]
+    );
+
+    const { item } = stepsVariants({ orientation, state });
+
+    return (
+      <StepItemContext.Provider value={context}>
+        <View ref={ref} className={item({ className })} {...props}>
+          {children}
+        </View>
+      </StepItemContext.Provider>
+    );
+  }
+);
+StepsItem.displayName = 'Steps.Item';
+
+export interface StepsTriggerProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** Makes its item selectable. Omit it for a read-only stepper. */
+const StepsTrigger = forwardRef<View, StepsTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const { setActiveStep, orientation } = useSteps('Steps.Trigger');
+    const { step, state, isDisabled } = useStepItem('Steps.Trigger');
+    const { trigger } = stepsVariants({ orientation, state, isDisabled });
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: isDisabled, selected: state === 'active' }}
+        disabled={isDisabled}
+        onPress={() => setActiveStep(step)}
+        className={trigger({ className })}
+        {...props}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+);
+StepsTrigger.displayName = 'Steps.Trigger';
+
+export interface StepsIndicatorProps extends ViewProps {
+  className?: string;
+  /** Replaces the number / check / spinner entirely. */
+  children?: ReactNode;
+}
+
+/**
+ * The circle. Shows the step number, a check once completed, or a spinner
+ * while loading.
+ */
+const StepsIndicator = forwardRef<View, StepsIndicatorProps>(
+  ({ className, children, ...props }, ref) => {
+    const { orientation } = useSteps('Steps.Indicator');
+    const { step, state, isLoading } = useStepItem('Steps.Indicator');
+    const { indicator, indicatorLabel } = stepsVariants({ orientation, state });
+    const checkColor = useCSSVariable('--color-primary-foreground');
+
+    return (
+      <View ref={ref} className={indicator({ className })} {...props}>
+        {children ?? (
+          <>
+            {isLoading ? (
+              <Spinner size="sm" />
+            ) : state === 'completed' ? (
+              <CheckIcon
+                size={14}
+                color={typeof checkColor === 'string' ? checkColor : '#fff'}
+              />
+            ) : (
+              // Steps are zero-based internally but read as 1, 2, 3.
+              <Text className={indicatorLabel()}>{step + 1}</Text>
+            )}
+          </>
+        )}
+      </View>
+    );
+  }
+);
+StepsIndicator.displayName = 'Steps.Indicator';
+
+const StepsTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+  const { orientation } = useSteps('Steps.Title');
+  const { state } = useStepItem('Steps.Title');
+  const { title } = stepsVariants({ orientation, state });
+  return <Text ref={ref} className={title({ className })} {...props} />;
+});
+StepsTitle.displayName = 'Steps.Title';
+
+const StepsDescription = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+  const { orientation } = useSteps('Steps.Description');
+  const { state } = useStepItem('Steps.Description');
+  const { description } = stepsVariants({ orientation, state });
+  return <Text ref={ref} className={description({ className })} {...props} />;
+});
+StepsDescription.displayName = 'Steps.Description';
+
+export interface StepsSeparatorProps extends ViewProps {
+  className?: string;
+}
+
+/**
+ * The connector between two steps. Fills with the primary colour once the
+ * step before it is complete.
+ *
+ * Place it inside a Steps.Item so it can read that item's state — the
+ * separator after step 1 goes solid when step 1 is done.
+ */
+const StepsSeparator = forwardRef<View, StepsSeparatorProps>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useSteps('Steps.Separator');
+    const { state } = useStepItem('Steps.Separator');
+    const { separator } = stepsVariants({ orientation, state });
+
+    return (
+      <View
+        ref={ref}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        className={separator({ className })}
+        {...props}
+      />
+    );
+  }
+);
+StepsSeparator.displayName = 'Steps.Separator';
+
+export const Steps = Object.assign(StepsRoot, {
+  Item: StepsItem,
+  Trigger: StepsTrigger,
+  Indicator: StepsIndicator,
+  Title: StepsTitle,
+  Description: StepsDescription,
+  Separator: StepsSeparator,
+});

package/src/components/tabs/index.tsx

@@ -2,6 +2,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
   type ReactNode,
@@ -100,8 +101,15 @@ function TabsIndicator() {
   const initialized = useSharedValue(0);
 
   const layout = layouts[value];
-  if (layout) {
+
+  // In an effect, not the render body: touching a shared value during render
+  // is a Reanimated strict-mode violation, and the write can be lost or
+  // duplicated when React re-renders.
+  useEffect(() => {
+    if (!layout) return;
+
     if (initialized.value === 0) {
+      // First measurement snaps into place; there is nothing to animate from.
       x.value = layout.x;
       width.value = layout.width;
       initialized.value = 1;
@@ -109,7 +117,7 @@ function TabsIndicator() {
       x.value = withSpring(layout.x, SPRING);
       width.value = withSpring(layout.width, SPRING);
     }
-  }
+  }, [layout?.x, layout?.width, x, width, initialized, layout]);
 
   const style = useAnimatedStyle(() => ({
     opacity: initialized.value,