@cdx-ui/components 0.0.1-alpha.21 → 0.0.1-alpha.23

package/src/components/Dialog/styles.ts

@@ -0,0 +1,88 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BG_INVERSE,
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_PRIMARY,
+  COLOR_TEXT_SECONDARY,
+  RADIUS_MD,
+  SHADOW_MD,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
+
+// ── Overlay ─────────────────────────────────────────────────
+
+export const dialogOverlayVariants = cva(['absolute inset-0', COLOR_BG_INVERSE, 'opacity-50']);
+
+// ── Content ─────────────────────────────────────────────────
+
+export const dialogContentVariants = cva(
+  [
+    COLOR_BG_PRIMARY,
+    `border ${COLOR_BORDER_DEFAULT}`,
+    RADIUS_MD,
+    Platform.select({ web: SHADOW_MD, default: '' }),
+    'max-h-[85vh] overflow-hidden',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'w-[90%] max-w-sm',
+        md: 'w-[90%] max-w-md',
+        lg: 'w-[90%] max-w-lg',
+        full: 'w-full mx-4',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+// ── Header ──────────────────────────────────────────────────
+
+export const dialogHeaderVariants = cva([
+  'flex-row items-center justify-between shrink-0',
+  'px-6 pt-6 pb-2',
+]);
+
+// ── Title ───────────────────────────────────────────────────
+
+export const dialogTitleVariants = cva(['text-lg font-semibold', COLOR_TEXT_PRIMARY]);
+
+// ── Description ─────────────────────────────────────────────
+
+export const dialogDescriptionVariants = cva(['text-sm mt-1', COLOR_TEXT_SECONDARY]);
+
+// ── Body ────────────────────────────────────────────────────
+
+export const dialogBodyVariants = cva(['px-6 py-4 shrink min-h-0']);
+
+// ── Footer ──────────────────────────────────────────────────
+
+export const dialogFooterVariants = cva([
+  'flex-row items-center justify-end shrink-0',
+  'gap-3 px-6 pt-2 pb-6',
+]);
+
+// ── Close ───────────────────────────────────────────────────
+
+export const dialogCloseVariants = cva([
+  'p-1 -m-1 rounded-full',
+  TRANSITION_COLORS,
+  Platform.select({
+    default: 'data-[active=true]:opacity-70',
+    web: [
+      'data-[hover=true]:bg-slate-100',
+      'data-[active=true]:bg-slate-200',
+      'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
+    ].join(' '),
+  }),
+]);
+
+// ── Close Icon ──────────────────────────────────────────────
+
+export const dialogCloseIconVariants = cva(['size-5 text-slate-500']);
+
+export type DialogVariantProps = VariantProps<typeof dialogContentVariants>;

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,12 +1,15 @@
+export * from './AlertDialog';
 export * from './Avatar';
 export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
-export * from './Chip';
 export * from './Card';
 export * from './Checkbox';
+export * from './Chip';
+export * from './Dialog';
 export * from './Input';
 export * from './Link';
+export * from './ProgressSegmented';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';