@cdx-ui/components 0.0.1-alpha.9 → 0.0.1-beta.10

package/src/components/ListItem/index.tsx

@@ -0,0 +1,285 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  createListItem,
+  type IListItemLeadingSlotProps,
+  type IListItemProps,
+  type IListItemSectionHeaderProps,
+  type ListItemCrossAlign,
+} from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext, type WithStyleContextProps } from '@cdx-ui/utils';
+import {
+  listItemContentVariants,
+  listItemDescriptionVariants,
+  listItemLeadingSlotVariants,
+  listItemMetaVariants,
+  listItemRootVariants,
+  listItemSectionHeaderLabelVariants,
+  listItemSectionHeaderVariants,
+  listItemTitleVariants,
+  listItemTrailingSlotVariants,
+  type ListItemVariantProps,
+} from './styles';
+
+const SCOPE = 'LIST_ITEM';
+
+const RootView = withStyleContext(View, SCOPE);
+const RootPressable = withStyleContext(Pressable, SCOPE);
+
+const ListItemPrimitive = createListItem({
+  View: RootView,
+  Pressable: RootPressable,
+  LeadingSlot: View,
+  Content: View,
+  Title: Text,
+  Description: Text,
+  Meta: Text,
+  TrailingSlot: View,
+  SectionHeader: View,
+});
+
+const useListItemStyleContext = (): Pick<ListItemVariantProps, 'size' | 'crossAlign'> => {
+  const ctx = useStyleContext(SCOPE) as ListItemVariantProps | undefined;
+  return { size: ctx?.size ?? 'default', crossAlign: ctx?.crossAlign ?? 'center' };
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export interface ListItemProps extends IListItemProps, WithStyleContextProps {
+  className?: string;
+}
+
+const ListItemRoot = forwardRef<View, ListItemProps>(
+  (
+    {
+      size = 'default',
+      surface = 'default',
+      showSeparator = true,
+      crossAlign = 'center',
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const computedClassName = cn(
+      listItemRootVariants({ size, surface, showSeparator, crossAlign }),
+      className,
+    );
+
+    return (
+      <ListItemPrimitive
+        ref={ref as never}
+        className={computedClassName}
+        context={{ size, surface, showSeparator, crossAlign }}
+        crossAlign={crossAlign}
+        showSeparator={showSeparator}
+        size={size}
+        style={style}
+        surface={surface}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemRoot.displayName = 'ListItem';
+
+// =============================================================================
+// SLOTS & TEXT
+// =============================================================================
+
+export interface ListItemLeadingSlotProps extends IListItemLeadingSlotProps {
+  className?: string;
+}
+
+const ListItemLeadingSlot = forwardRef<View, ListItemLeadingSlotProps>(
+  ({ className, style, ...props }, ref) => (
+    <ListItemPrimitive.LeadingSlot
+      ref={ref as never}
+      className={cn(listItemLeadingSlotVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+ListItemLeadingSlot.displayName = 'ListItem.LeadingSlot';
+
+export interface ListItemContentProps extends ViewProps {
+  className?: string;
+}
+
+const ListItemContent = forwardRef<View, ListItemContentProps>(
+  ({ className, style, ...props }, ref) => {
+    const { crossAlign } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.Content
+        ref={ref as never}
+        className={cn(listItemContentVariants({ crossAlign }), className)}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemContent.displayName = 'ListItem.Content';
+
+export interface ListItemTitleProps extends TextProps {
+  className?: string;
+}
+
+const ListItemTitle = forwardRef<Text, ListItemTitleProps>(
+  ({ className, numberOfLines = 1, style, ...props }, ref) => {
+    const { size } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.Title
+        ref={ref as never}
+        className={cn(listItemTitleVariants({ size }), className)}
+        numberOfLines={numberOfLines}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemTitle.displayName = 'ListItem.Title';
+
+export interface ListItemDescriptionProps extends TextProps {
+  className?: string;
+}
+
+const ListItemDescription = forwardRef<Text, ListItemDescriptionProps>(
+  ({ className, style, ...props }, ref) => {
+    const { size } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.Description
+        ref={ref as never}
+        className={cn(listItemDescriptionVariants({ size }), className)}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemDescription.displayName = 'ListItem.Description';
+
+export interface ListItemMetaProps extends TextProps {
+  className?: string;
+}
+
+const ListItemMeta = forwardRef<Text, ListItemMetaProps>(
+  ({ className, numberOfLines = 1, style, ...props }, ref) => {
+    const { size } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.Meta
+        ref={ref as never}
+        className={cn(listItemMetaVariants({ size }), className)}
+        numberOfLines={numberOfLines}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemMeta.displayName = 'ListItem.Meta';
+
+export interface ListItemTrailingSlotProps extends ViewProps {
+  className?: string;
+}
+
+const ListItemTrailingSlot = forwardRef<View, ListItemTrailingSlotProps>(
+  ({ className, style, ...props }, ref) => {
+    const { crossAlign } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.TrailingSlot
+        ref={ref as never}
+        className={cn(listItemTrailingSlotVariants({ crossAlign }), className)}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemTrailingSlot.displayName = 'ListItem.TrailingSlot';
+
+const wrapSectionHeaderLabel = (children: ReactNode): ReactNode => {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return <Text className={cn(listItemSectionHeaderLabelVariants())}>{children}</Text>;
+  }
+  return children;
+};
+
+// =============================================================================
+// SECTION HEADER
+// =============================================================================
+
+export interface ListItemSectionHeaderComponentProps extends IListItemSectionHeaderProps {
+  className?: string;
+}
+
+const ListItemSectionHeader = forwardRef<View, ListItemSectionHeaderComponentProps>(
+  ({ children, className, showDivider = true, style, trailing, ...props }, ref) => (
+    <ListItemPrimitive.SectionHeader
+      ref={ref as never}
+      className={cn(listItemSectionHeaderVariants({ showDivider }), className)}
+      showDivider={showDivider}
+      style={style}
+      trailing={trailing}
+      {...props}
+    >
+      {wrapSectionHeaderLabel(children)}
+    </ListItemPrimitive.SectionHeader>
+  ),
+);
+
+ListItemSectionHeader.displayName = 'ListItem.SectionHeader';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type ListItemCompound = typeof ListItemRoot & {
+  LeadingSlot: typeof ListItemLeadingSlot;
+  Content: typeof ListItemContent;
+  Title: typeof ListItemTitle;
+  Description: typeof ListItemDescription;
+  Meta: typeof ListItemMeta;
+  TrailingSlot: typeof ListItemTrailingSlot;
+  SectionHeader: typeof ListItemSectionHeader;
+};
+
+export const ListItem = Object.assign(ListItemRoot, {
+  LeadingSlot: ListItemLeadingSlot,
+  Content: ListItemContent,
+  Title: ListItemTitle,
+  Description: ListItemDescription,
+  Meta: ListItemMeta,
+  TrailingSlot: ListItemTrailingSlot,
+  SectionHeader: ListItemSectionHeader,
+}) as ListItemCompound;
+
+export type { ListItemCrossAlign, ListItemVariantProps };
+export {
+  listItemContentVariants,
+  listItemDescriptionVariants,
+  listItemLeadingSlotVariants,
+  listItemMetaVariants,
+  listItemRootVariants,
+  listItemSectionHeaderLabelVariants,
+  listItemSectionHeaderVariants,
+  listItemTitleVariants,
+  listItemTrailingSlotVariants,
+} from './styles';

package/src/components/ListItem/styles.ts

@@ -0,0 +1,160 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_MUTED,
+  COLOR_TEXT_PRIMARY,
+  COLOR_TEXT_SECONDARY,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
+
+// ── Root (row): density, surface, separator, interactive feedback ──────────
+
+export const listItemRootVariants = cva(
+  [
+    'flex-row self-stretch w-full px-4',
+    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
+    'data-[active=true]:opacity-70',
+    TRANSITION_COLORS,
+    Platform.select({
+      web: [
+        'outline-none',
+        'web:data-[hovered=true]:bg-slate-50',
+        'web:focus-visible:data-[disabled=false]:bg-slate-50',
+        'web:focus-visible:data-[disabled=false]:ring-2 web:focus-visible:data-[disabled=false]:ring-slate-400/40 web:focus-visible:data-[disabled=false]:ring-offset-2',
+      ].join(' '),
+      default: '',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        default: 'gap-3 py-4',
+        compact: 'gap-2 py-3',
+      },
+      surface: {
+        default: 'bg-white',
+        negative: 'bg-red-50',
+      },
+      showSeparator: {
+        true: ['border-b border-solid', COLOR_BORDER_DEFAULT],
+        false: 'border-b-0',
+      },
+      crossAlign: {
+        center: 'items-center',
+        start: 'items-start',
+      },
+    },
+    compoundVariants: [
+      {
+        surface: 'negative',
+        className: Platform.select({
+          web: 'web:data-[hovered=true]:bg-red-100/90',
+          default: '',
+        }),
+      },
+    ],
+    defaultVariants: {
+      size: 'default',
+      surface: 'default',
+      showSeparator: true,
+      crossAlign: 'center',
+    },
+  },
+);
+
+// ── Leading / trailing slots ─────────────────────────────────────────────────
+
+export const listItemLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export const listItemTrailingSlotVariants = cva(['flex shrink-0 flex-row justify-end gap-2'], {
+  variants: {
+    crossAlign: {
+      center: 'items-center',
+      start: 'items-start self-start',
+    },
+  },
+  defaultVariants: {
+    crossAlign: 'center',
+  },
+});
+
+// ── Content stack (title / description / meta) ───────────────────────────────
+
+export const listItemContentVariants = cva(['flex min-w-0 flex-1 flex-col gap-1'], {
+  variants: {
+    crossAlign: {
+      center: 'justify-center',
+      start: 'justify-start',
+    },
+  },
+  defaultVariants: {
+    crossAlign: 'center',
+  },
+});
+
+// ── Typography ───────────────────────────────────────────────────────────────
+
+export const listItemTitleVariants = cva([COLOR_TEXT_PRIMARY, 'font-medium'], {
+  variants: {
+    size: {
+      default: 'text-base leading-snug',
+      compact: 'text-sm leading-snug',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const listItemDescriptionVariants = cva([COLOR_TEXT_SECONDARY], {
+  variants: {
+    size: {
+      default: 'text-sm leading-normal',
+      compact: 'text-xs leading-normal',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const listItemMetaVariants = cva([COLOR_TEXT_MUTED], {
+  variants: {
+    size: {
+      default: 'text-xs leading-normal',
+      compact: 'text-[11px] leading-normal',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+// ── Section header (group label row inside lists / cards) ───────────────────
+
+export const listItemSectionHeaderVariants = cva(
+  [
+    'flex-row items-center justify-between gap-2 border-b border-solid px-4 py-3',
+    COLOR_BORDER_DEFAULT,
+  ],
+  {
+    variants: {
+      showDivider: {
+        true: ['border-t-4 border-solid border-t-surface-brand-strong/40', 'border-x-0'],
+        false: 'border-t-0',
+      },
+    },
+    defaultVariants: {
+      showDivider: true,
+    },
+  },
+);
+
+/** Default section-title typography; applied by `ListItem.SectionHeader` for string/number children. Exported for rare custom composition. */
+export const listItemSectionHeaderLabelVariants = cva([
+  'text-xs font-semibold uppercase tracking-wide',
+  COLOR_TEXT_SECONDARY,
+]);
+
+export type ListItemVariantProps = VariantProps<typeof listItemRootVariants>;

package/src/components/OtpInput/index.tsx

@@ -0,0 +1,79 @@
+import type { ComponentProps, ComponentRef, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { View } from 'react-native';
+import { createOtpInput, type IOtpInputRootProps } from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { HStack } from '../Stack/HStack';
+import { Input, type InputProps } from '../Input';
+import type { InputVariantProps } from '../Input/styles';
+import {
+  otpCellVariants,
+  otpFieldVariants,
+  otpRootVariants,
+  type OtpInputVariantProps,
+} from './styles';
+
+const SCOPE = 'OTP_INPUT';
+
+const OtpRoot = withStyleContext(HStack, SCOPE);
+
+const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
+
+const OtpStyledCell = forwardRef<View, InputProps>(
+  ({ className, children, ...props }, ref: ForwardedRef<View>) => {
+    const { size, variant } = useOtpInputStyleContext();
+    return (
+      <Input
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(otpCellVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </Input>
+    );
+  },
+);
+
+OtpStyledCell.displayName = 'OtpInput.Cell';
+
+const OtpStyledField = forwardRef<
+  ComponentRef<typeof Input.Field>,
+  ComponentProps<typeof Input.Field>
+>(({ className, ...props }, ref) => {
+  const { size } = useOtpInputStyleContext();
+  return <Input.Field ref={ref} className={cn(otpFieldVariants({ size }), className)} {...props} />;
+});
+
+OtpStyledField.displayName = 'OtpInput.Field';
+
+const OtpPrimitive = createOtpInput({
+  Root: OtpRoot,
+  Cell: OtpStyledCell,
+  Field: OtpStyledField,
+});
+
+export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInputVariantProps {
+  variant?: NonNullable<InputProps['variant']>;
+  size?: NonNullable<InputProps['size']>;
+  className?: string;
+}
+
+export const OtpInput = forwardRef<View, OtpInputProps>(
+  ({ variant = 'outline', size = 'default', fullWidth = true, className, style, ...rest }, ref) => {
+    const rootClassName = cn(otpRootVariants({ size, fullWidth }), className);
+
+    return (
+      <OtpPrimitive
+        ref={ref}
+        className={rootClassName}
+        style={style}
+        context={{ variant, size }}
+        {...rest}
+      />
+    );
+  },
+);
+
+OtpInput.displayName = 'OtpInput';

package/src/components/OtpInput/styles.ts

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const otpRootVariants = cva('flex-row items-stretch gap-2.5', {
+  variants: {
+    size: {
+      default: '',
+      small: '',
+    },
+    fullWidth: {
+      true: 'w-full self-stretch justify-center',
+      false: 'self-start',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+    fullWidth: true,
+  },
+});
+
+/** Narrow cell chrome: overrides Input root `w-full` / wide horizontal padding for one digit. */
+export const otpCellVariants = cva('shrink-0 justify-center', {
+  variants: {
+    size: {
+      default: 'w-12 min-w-12 max-w-12 px-1',
+      small: 'w-10 min-w-10 max-w-10 px-0.5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums', {
+  variants: {
+    size: {
+      default: 'text-xl leading-6',
+      small: 'text-base leading-5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export type OtpInputVariantProps = VariantProps<typeof otpRootVariants>;

package/src/components/ProgressBar/index.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { createProgress, type IProgressProps } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  progressBarIndicatorVariants,
+  progressBarTrackVariants,
+  type ProgressBarTrackVariantProps,
+} from './styles';
+
+const ProgressPrimitive = createProgress({
+  Root: View,
+  Indicator: View,
+});
+
+export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
+  readonly className?: string;
+}
+
+export interface ProgressBarIndicatorProps extends ViewProps {
+  readonly className?: string;
+}
+
+const ProgressBarRoot = forwardRef<View, ProgressBarProps>(
+  ({ className, style, ...props }, ref) => {
+    const trackClass = cn(progressBarTrackVariants(), className);
+
+    return <ProgressPrimitive ref={ref} className={trackClass} style={style} {...props} />;
+  },
+);
+
+ProgressBarRoot.displayName = 'ProgressBar';
+
+const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
+  ({ className, style, ...props }, ref) => (
+    <ProgressPrimitive.Indicator
+      ref={ref}
+      className={cn(progressBarIndicatorVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+ProgressBarIndicator.displayName = 'ProgressBar.Indicator';
+
+type ProgressBarCompoundComponent = typeof ProgressBarRoot & {
+  Indicator: typeof ProgressBarIndicator;
+};
+
+export const ProgressBar = Object.assign(ProgressBarRoot, {
+  Indicator: ProgressBarIndicator,
+}) as ProgressBarCompoundComponent;

package/src/components/ProgressBar/styles.ts

@@ -0,0 +1,9 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const progressBarTrackVariants = cva([
+  'w-full flex-row overflow-hidden rounded-full bg-surface-action-tint h-1',
+]);
+
+export const progressBarIndicatorVariants = cva(['rounded-full bg-surface-action-strong']);
+
+export type ProgressBarTrackVariantProps = VariantProps<typeof progressBarTrackVariants>;