@cdx-ui/components 0.0.1-beta.99 → 0.1.0

package/src/components/Calendar/index.tsx

@@ -0,0 +1,151 @@
+import { forwardRef, useCallback, useId, useMemo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Calendar as FlashCalendar } from '@marceloterreiro/flash-calendar';
+import {
+  CalendarGrid as CalendarGridPrimitive,
+  CalendarRoot as CalendarRootPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useCalendarContext,
+  type ICalendarProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { CalendarMonthHeader } from './CalendarMonthHeader';
+import { CalendarYearPickerGrid } from './CalendarYearPickerGrid';
+import {
+  FLASH_CALENDAR_DAY_HEIGHT,
+  formatFlashCalendarWeekdayShort,
+  toCalendarDateId,
+  useFlashCalendarTheme,
+} from './flashCalendarAdapter';
+import { calendarRootVariants } from './styles';
+
+export interface CalendarProps extends ICalendarProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+function CalendarDefaultBody() {
+  const { view } = useCalendarContext();
+  return (
+    <>
+      <CalendarHeader />
+      {view === 'year' ? <CalendarYearPicker /> : <CalendarGrid />}
+    </>
+  );
+}
+
+const CalendarRoot = forwardRef<View, CalendarProps>(
+  ({ className, children, style, ...props }, ref) => (
+    <CalendarRootPrimitive
+      ref={ref}
+      className={cn(calendarRootVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'calendar' }))}
+    >
+      {children ?? <CalendarDefaultBody />}
+    </CalendarRootPrimitive>
+  ),
+);
+
+CalendarRoot.displayName = 'Calendar';
+
+const CalendarHeader = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { monthId, onMonthIdChange, disabled, view, setView, locale, labels } =
+    useCalendarContext();
+  return (
+    <CalendarMonthHeader
+      ref={ref}
+      monthId={monthId}
+      onMonthIdChange={onMonthIdChange}
+      disabled={disabled}
+      view={view}
+      onViewChange={setView}
+      locale={locale}
+      labels={labels}
+      className={className}
+      style={style}
+      {...props}
+    />
+  );
+});
+
+CalendarHeader.displayName = 'Calendar.Header';
+
+const CalendarGrid = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { value, onValueChange, monthId, minValue, maxValue, disabled, locale } =
+    useCalendarContext();
+  const instanceId = useId();
+  const theme = useFlashCalendarTheme(value);
+
+  const formatWeekday = useCallback(
+    (date: Date) => formatFlashCalendarWeekdayShort(date, locale),
+    [locale],
+  );
+
+  const activeRanges = useMemo(() => (value ? [{ startId: value, endId: value }] : []), [value]);
+
+  const handleDayPress = useCallback(
+    (dateId: string) => {
+      if (!disabled) {
+        onValueChange?.(toCalendarDateId(dateId));
+      }
+    },
+    [disabled, onValueChange],
+  );
+
+  return (
+    <CalendarGridPrimitive ref={ref} className={className} style={style} {...props}>
+      <FlashCalendar
+        calendarInstanceId={instanceId}
+        calendarMonthId={monthId}
+        calendarActiveDateRanges={activeRanges}
+        calendarMinDateId={minValue}
+        calendarMaxDateId={maxValue}
+        calendarMonthHeaderHeight={0}
+        calendarDayHeight={FLASH_CALENDAR_DAY_HEIGHT}
+        calendarWeekHeaderHeight={28}
+        calendarRowVerticalSpacing={4}
+        calendarRowHorizontalSpacing={4}
+        getCalendarMonthFormat={() => ''}
+        getCalendarWeekDayFormat={formatWeekday}
+        onCalendarDayPress={handleDayPress}
+        theme={theme}
+      />
+    </CalendarGridPrimitive>
+  );
+});
+
+CalendarGrid.displayName = 'Calendar.Grid';
+
+const CalendarYearPicker = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { monthId, onMonthIdChange, disabled, setView, labels } = useCalendarContext();
+  return (
+    <CalendarYearPickerGrid
+      ref={ref}
+      monthId={monthId}
+      onMonthIdChange={onMonthIdChange}
+      disabled={disabled}
+      onViewChange={setView}
+      labels={labels}
+      className={className}
+      style={style}
+      {...props}
+    />
+  );
+});
+
+CalendarYearPicker.displayName = 'Calendar.YearPicker';
+
+type CalendarCompound = typeof CalendarRoot & {
+  Header: typeof CalendarHeader;
+  Grid: typeof CalendarGrid;
+  YearPicker: typeof CalendarYearPicker;
+};
+
+export const Calendar = Object.assign(CalendarRoot, {
+  Header: CalendarHeader,
+  Grid: CalendarGrid,
+  YearPicker: CalendarYearPicker,
+}) as CalendarCompound;

package/src/components/Calendar/styles.ts

@@ -0,0 +1,80 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, DISABLED_OPACITY } from '../../styles/constants';
+
+export const calendarRootVariants = cva([
+  'gap-3 rounded-[var(--border-radius-default)] bg-surface-primary p-3',
+  DISABLED_OPACITY,
+  DISABLED_CURSOR,
+]);
+
+export const calendarMonthHeaderVariants = cva('flex-row items-center justify-between gap-2 px-1');
+
+export const calendarMonthHeaderToggleVariants = cva('min-w-0 flex-1 flex-row items-center gap-1');
+
+export const calendarMonthHeaderLabelVariants = cva('body-lg font-semibold shrink', {
+  variants: {
+    isYearView: {
+      true: 'text-content-action',
+      false: 'text-content-primary',
+    },
+  },
+  defaultVariants: { isYearView: false },
+});
+
+export const calendarMonthHeaderIconVariants = cva('size-5 shrink-0', {
+  variants: {
+    isYearView: {
+      true: 'text-content-action',
+      false: 'text-content-secondary',
+    },
+  },
+  defaultVariants: { isYearView: false },
+});
+
+export const calendarMonthHeaderNavVariants = cva('flex-row items-center gap-1');
+
+export const calendarYearPickerGridVariants = cva(
+  'flex-row flex-wrap justify-between gap-y-2 px-1 py-1',
+);
+
+export const calendarPillCellVariants = cva(
+  'my-0.5 w-[31%] items-center justify-center rounded-[var(--border-radius-round)] py-2.5',
+  {
+    variants: {
+      selected: {
+        true: 'bg-surface-action-strong',
+        false: 'bg-transparent',
+      },
+      // Dims out-of-range / disabled cells and gates the compound variant
+      // below so hover is suppressed on disabled cells.
+      disabled: {
+        true: DISABLED_OPACITY,
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        selected: false,
+        disabled: false,
+        className: 'web:hover:bg-surface-action-subtle',
+      },
+    ],
+    defaultVariants: { selected: false, disabled: false },
+  },
+);
+
+export const calendarPillCellTextVariants = cva('body-md', {
+  variants: {
+    selected: {
+      true: 'font-semibold text-content-action-on-strong',
+      false: 'text-content-primary',
+    },
+  },
+  defaultVariants: { selected: false },
+});
+
+export type CalendarRootVariantProps = VariantProps<typeof calendarRootVariants>;
+export type CalendarMonthHeaderLabelVariantProps = VariantProps<
+  typeof calendarMonthHeaderLabelVariants
+>;
+export type CalendarPillCellVariantProps = VariantProps<typeof calendarPillCellVariants>;

package/src/components/Card/index.tsx

@@ -7,6 +7,7 @@ import {
   cardFooterVariants,
   cardHeaderVariants,
   cardRootVariants,
+  cardStripeVariants,
   type CardContentVariantProps,
   type CardFooterVariantProps,
   type CardVariantProps,
@@ -52,6 +53,34 @@ const CardRoot = forwardRef<View, CardProps>(
 
 CardRoot.displayName = 'Card';
 
+// =============================================================================
+// STYLED STRIPE COMPONENT
+// =============================================================================
+
+export interface CardStripeProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const CardStripe = forwardRef<View, CardStripeProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const computedClassName = cn(cardStripeVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'card-stripe' }))}
+      />
+    );
+  },
+);
+
+CardStripe.displayName = 'Card.Stripe';
+
 // =============================================================================
 // STYLED HEADER COMPONENT
 // =============================================================================
@@ -158,12 +187,14 @@ CardFooter.displayName = 'Card.Footer';
 // =============================================================================
 
 type CardCompoundComponent = typeof CardRoot & {
+  Stripe: typeof CardStripe;
   Header: typeof CardHeader;
   Content: typeof CardContent;
   Footer: typeof CardFooter;
 };
 
 export const Card = Object.assign(CardRoot, {
+  Stripe: CardStripe,
   Header: CardHeader,
   Content: CardContent,
   Footer: CardFooter,

package/src/components/Card/styles.ts

@@ -1,4 +1,4 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, VariantProps } from '@cdx-ui/utils';
 
 // ── Root ────────────────────────────────────────────────────
 
@@ -19,10 +19,13 @@ export const cardRootVariants = cva(
   },
 );
 
+// ── Stripe ──────────────────────────────────────────────────
+
+export const cardStripeVariants = cva(['bg-brand-400', 'h-2', 'w-full']);
+
 // ── Header ──────────────────────────────────────────────────
 
 export const cardHeaderVariants = cva([
-  'border-t-8 border-t-surface-brand-strong',
   'border-b border-solid border-b-stroke-secondary',
   'flex-row items-center justify-between gap-0.5',
   'px-5 py-3',

package/src/components/Carousel/context.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ICarouselInstance } from 'react-native-reanimated-carousel';
+import { createContext } from '@cdx-ui/utils';
+
+export interface CarouselContextValue {
+  progress: SharedValue<number>;
+  carouselRef: RefObject<ICarouselInstance | null>;
+  loop: boolean;
+  itemCount: number;
+  vertical: boolean;
+}
+
+export const [CarouselProgressProvider, useCarouselProgressContext] =
+  createContext<CarouselContextValue>('CarouselProgress', { strict: false });

package/src/components/Carousel/index.tsx

@@ -0,0 +1,268 @@
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+} from 'react';
+import type { AccessibilityRole, AccessibilityState, ViewStyle } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import RNCarousel, {
+  Pagination as RNCarouselPagination,
+  type ICarouselInstance,
+  type TCarouselProps,
+} from 'react-native-reanimated-carousel';
+import { useResolveClassNames } from 'uniwind';
+import { cn, mergeRefs } from '@cdx-ui/utils';
+import {
+  CarouselProgressProvider,
+  useCarouselProgressContext,
+  type CarouselContextValue,
+} from './context';
+import { CarouselNextButton, CarouselPrevButton } from './navButton';
+import { resolveCarouselPaginationScrollAction } from './paginationNavigation';
+import { carouselPaginationContainerClassName, carouselPaginationDotVariants } from './styles';
+
+export type { CarouselNavButtonProps } from './navButton';
+
+export type CarouselRef = ICarouselInstance;
+
+/**
+ * Full passthrough of `react-native-reanimated-carousel`'s own props (per `01-api-design.md`,
+ * Resolved Question #1) — re-exported under a Forge-owned name so consumers never import the
+ * adopted library directly. A type alias (not `interface extends`) because `TCarouselProps<T>`
+ * is itself a union-containing type (vertical/mode discriminants), which interfaces cannot extend.
+ */
+export type CarouselProps<T> = TCarouselProps<T> & {
+  className?: string;
+  /** Rendered inside the carousel's progress-sharing provider — use to compose `Carousel.Pagination`, `Carousel.PrevButton`, and `Carousel.NextButton`. */
+  children?: ReactNode;
+};
+
+/** Mirrors the adopted library's private `DotStyle` shape (not exported) without importing it. */
+type CarouselDotStyle = Omit<ViewStyle, 'width' | 'height' | 'backgroundColor' | 'borderRadius'> & {
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+  borderRadius?: number;
+};
+
+function isSharedValueProgress(value: unknown): value is SharedValue<number> {
+  return typeof value === 'object' && value !== null && 'value' in value;
+}
+
+function CarouselInner<T>(
+  {
+    className,
+    style,
+    onProgressChange,
+    children,
+    loop = true,
+    defaultIndex = 0,
+    ...rest
+  }: CarouselProps<T>,
+  ref: Ref<ICarouselInstance>,
+) {
+  const internalRef = useRef<ICarouselInstance>(null);
+  const internalProgress = useSharedValue(defaultIndex);
+  const resolvedClassNameStyle = useResolveClassNames(cn(className));
+  const vertical = rest.vertical ?? false;
+  const itemCount = rest.data.length;
+
+  const handleProgressChange = useCallback(
+    (offsetProgress: number, absoluteProgress: number) => {
+      internalProgress.value = absoluteProgress;
+      if (typeof onProgressChange === 'function') {
+        onProgressChange(offsetProgress, absoluteProgress);
+      }
+    },
+    [onProgressChange, internalProgress],
+  );
+
+  const consumerProgress = isSharedValueProgress(onProgressChange) ? onProgressChange : undefined;
+  const contextValue: CarouselContextValue = {
+    progress: consumerProgress ?? internalProgress,
+    carouselRef: internalRef,
+    loop,
+    itemCount,
+    vertical,
+  };
+
+  return (
+    <CarouselProgressProvider value={contextValue}>
+      <RNCarousel
+        ref={mergeRefs(ref, internalRef)}
+        style={[resolvedClassNameStyle, style]}
+        onProgressChange={consumerProgress ?? handleProgressChange}
+        loop={loop}
+        defaultIndex={defaultIndex}
+        {...rest}
+      />
+      {children}
+    </CarouselProgressProvider>
+  );
+}
+
+const CarouselRoot = forwardRef(CarouselInner) as <T>(
+  props: CarouselProps<T> & { ref?: Ref<ICarouselInstance> },
+) => ReactElement | null;
+
+// =============================================================================
+// PAGINATION
+// =============================================================================
+
+export interface CarouselPaginationItemAccessibilityOverrides {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+}
+
+export interface CarouselPaginationProps<T = unknown> {
+  /** Carousel items — must be the same array (or same length) passed to `Carousel`'s `data`. */
+  data: T[];
+  /** Lay dots out vertically instead of horizontally. @default true (horizontal) */
+  horizontal?: boolean;
+  /** Custom content per dot; defaults to the library's built-in dot rendering. */
+  renderItem?: (item: T, index: number) => ReactNode;
+  /** Dot size in pixels (both width and height). */
+  size?: number;
+  /** Included in the default accessibility label, e.g. `"Slide 1 of 4 - {carouselName}"`. */
+  carouselName?: string;
+  /** Per-dot accessibility overrides. Defaults to `"Slide N of M"` / `"Go to Slide N of M"`. */
+  paginationItemAccessibility?: (
+    index: number,
+    length: number,
+  ) => CarouselPaginationItemAccessibilityOverrides;
+  className?: string;
+  /** Explicit progress value — only required when rendered outside `<Carousel>` (sibling composition). */
+  progress?: SharedValue<number>;
+  /** Explicit carousel ref for the default press-to-navigate behavior — only required outside `<Carousel>`. */
+  carouselRef?: RefObject<ICarouselInstance | null>;
+  /**
+   * Mirrors `Carousel`'s `loop` prop for shortest-path dot navigation.
+   * Defaults to `true` (same as `Carousel`) when omitted outside context.
+   */
+  loop?: boolean;
+  /** Overrides the default press-to-navigate behavior (`scrollTo({ index })`). */
+  onPress?: (index: number) => void;
+}
+
+function CarouselPaginationComponent<T extends object>({
+  className,
+  progress: progressProp,
+  carouselRef: carouselRefProp,
+  loop: loopProp,
+  onPress,
+  ...rest
+}: CarouselPaginationProps<T>) {
+  // `strict: false` with no `defaultValue` means this returns `undefined` outside a
+  // `<Carousel>` provider at runtime; cast to communicate that to TypeScript, since
+  // `createContext`'s helper type always reports `T` (see `@cdx-ui/utils`).
+  const context = useCarouselProgressContext() as CarouselContextValue | undefined;
+  const progress = progressProp ?? context?.progress;
+  const carouselRef = carouselRefProp ?? context?.carouselRef;
+  const loop = loopProp ?? context?.loop ?? true;
+
+  if (!progress) {
+    throw new Error(
+      'Carousel.Pagination must be rendered inside <Carousel> or receive an explicit `progress` prop.',
+    );
+  }
+
+  if (!onPress && !carouselRef) {
+    throw new Error(
+      'Carousel.Pagination must be rendered inside <Carousel> or receive an explicit `carouselRef` prop (or a custom `onPress`).',
+    );
+  }
+
+  const handlePress = useCallback(
+    (index: number) => {
+      if (onPress) {
+        onPress(index);
+        return;
+      }
+
+      const carousel = carouselRef?.current;
+      if (!carousel) return;
+
+      const scrollAction = resolveCarouselPaginationScrollAction(
+        carousel.getCurrentIndex(),
+        index,
+        rest.data.length,
+        loop,
+      );
+
+      if (scrollAction) {
+        carousel.scrollTo(scrollAction);
+      }
+    },
+    [onPress, carouselRef, loop, rest.data.length],
+  );
+
+  const containerStyle = useResolveClassNames(cn(carouselPaginationContainerClassName, className));
+  const dotStyle = useResolveClassNames(carouselPaginationDotVariants({ active: false }));
+  const activeDotStyle = useResolveClassNames(carouselPaginationDotVariants({ active: true }));
+
+  return (
+    <RNCarouselPagination.Custom
+      {...rest}
+      progress={progress}
+      onPress={handlePress}
+      containerStyle={containerStyle}
+      dotStyle={{
+        width: 6,
+        height: 6,
+        ...(dotStyle as CarouselDotStyle),
+      }}
+      activeDotStyle={{
+        width: 18,
+        height: 6,
+        ...(activeDotStyle as CarouselDotStyle),
+      }}
+    />
+  );
+}
+
+CarouselPaginationComponent.displayName = 'Carousel.Pagination';
+
+const CarouselPagination = CarouselPaginationComponent as <T>(
+  props: CarouselPaginationProps<T>,
+) => ReactElement | null;
+
+type CarouselCompoundComponent = typeof CarouselRoot & {
+  Pagination: typeof CarouselPagination;
+  PrevButton: typeof CarouselPrevButton;
+  NextButton: typeof CarouselNextButton;
+};
+
+export const Carousel = Object.assign(CarouselRoot, {
+  Pagination: CarouselPagination,
+  PrevButton: CarouselPrevButton,
+  NextButton: CarouselNextButton,
+}) as CarouselCompoundComponent;
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+export interface UseCarouselOptions {
+  /** Seed `progress` to match `Carousel`'s `defaultIndex` in sibling composition. @default 0 */
+  defaultIndex?: number;
+}
+
+export function useCarousel(options?: UseCarouselOptions) {
+  const ref = useRef<ICarouselInstance>(null);
+  const progress = useSharedValue(options?.defaultIndex ?? 0);
+  return {
+    ref,
+    /** Bind to `Carousel`'s `onProgressChange` and sibling `Carousel.Pagination`'s `progress`. */
+    progress,
+    next: (opts?: Parameters<ICarouselInstance['next']>[0]) => ref.current?.next(opts),
+    prev: (opts?: Parameters<ICarouselInstance['prev']>[0]) => ref.current?.prev(opts),
+    scrollTo: (opts?: Parameters<ICarouselInstance['scrollTo']>[0]) => ref.current?.scrollTo(opts),
+  };
+}