@cdx-ui/components 0.0.1-alpha.20 → 0.0.1-alpha.22

package/src/components/ProgressSegmented/index.tsx

@@ -0,0 +1,81 @@
+import { forwardRef, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  progressSegmentedVariants,
+  segmentVariants,
+  type ProgressSegmentedVariants,
+} from './styles';
+
+export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
+  /** Current step (1-based index into the segment count) */
+  readonly step: number;
+  /** Total number of segments */
+  readonly total?: number;
+  /** When true, the current step segment is marked as complete rather than in-progress */
+  readonly isStepComplete?: boolean;
+  /** Returns the accessibility value text announced by screen readers. Receives the clamped step, total, and whether the step is complete. */
+  readonly getAccessibilityText?: (step: number, total: number, isStepComplete: boolean) => string;
+  readonly className?: string;
+}
+
+export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
+  (
+    {
+      step,
+      total = 5,
+      isStepComplete = false,
+      getAccessibilityText,
+      className,
+      accessibilityLabel = 'Progress',
+      ...props
+    },
+    ref,
+  ) => {
+    const clampedStep = Math.max(0, Math.min(step, total));
+
+    const segments = useMemo(() => {
+      return Array.from({ length: total }, (_, index) => {
+        const segmentIndex = index + 1;
+        let state: 'complete' | 'incomplete' | 'inprogress' = 'incomplete';
+
+        if (segmentIndex < clampedStep || (isStepComplete && segmentIndex === clampedStep)) {
+          state = 'complete';
+        } else if (segmentIndex === clampedStep) {
+          state = 'inprogress';
+        }
+
+        return state;
+      });
+    }, [total, clampedStep, isStepComplete]);
+
+    let accessibilityText = `Step ${String(clampedStep)} of ${String(total)}`;
+    if (getAccessibilityText) {
+      accessibilityText = getAccessibilityText(clampedStep, total, isStepComplete);
+    } else if (isStepComplete) {
+      accessibilityText = `Step ${String(clampedStep)} of ${String(total)}, completed`;
+    }
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="progressbar"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityValue={{
+          min: 0,
+          max: total,
+          now: clampedStep,
+          text: accessibilityText,
+        }}
+        className={cn(progressSegmentedVariants(), className)}
+        {...props}
+      >
+        {segments.map((state, index) => (
+          <View key={index} className={cn(segmentVariants({ state }))} />
+        ))}
+      </View>
+    );
+  },
+);
+
+ProgressSegmented.displayName = 'ProgressSegmented';

package/src/components/ProgressSegmented/styles.ts

@@ -0,0 +1,19 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const progressSegmentedVariants = cva(['flex-row gap-1 w-full']);
+
+export const segmentVariants = cva(['flex-1 h-2 rounded'], {
+  variants: {
+    state: {
+      complete: 'bg-slate-900',
+      incomplete: 'bg-slate-300',
+      inprogress: 'bg-gradient-to-r from-slate-900 from-50% to-slate-300 to-50%',
+    },
+  },
+  defaultVariants: {
+    state: 'incomplete',
+  },
+});
+
+export type ProgressSegmentedVariants = VariantProps<typeof progressSegmentedVariants>;
+export type SegmentVariants = VariantProps<typeof segmentVariants>;

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Avatar';
+export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Chip';
@@ -6,6 +7,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Input';
 export * from './Link';
+export * from './ProgressSegmented';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';