@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.181

package/src/animation/utils.ts

@@ -0,0 +1,249 @@
+import type { Animation, AnimationRoot, AnimationValue } from './types';
+
+/**
+ * Check if the entire animation is disabled
+ * @param animation - Animation configuration
+ * @returns true if animation is disabled
+ */
+export function isAnimationDisabled<TConfig extends Record<string, any>>(
+  animation: Animation<TConfig> | AnimationRoot<TConfig> | undefined,
+): boolean {
+  // Check top-level disabled values
+  if (animation === false || animation === 'disabled') {
+    return true;
+  }
+
+  // Check state property in config objects
+  if (typeof animation === 'object' && animation !== null && 'state' in animation) {
+    const state = animation.state;
+    return state === false || state === 'disabled';
+  }
+
+  return false;
+}
+
+/**
+ * Check if root animation should cascade disable to all children
+ * @param animation - Root animation configuration
+ * @returns true if all animations should be disabled (including children)
+ */
+export function shouldDisableAll<TConfig extends Record<string, any>>(
+  animation: AnimationRoot<TConfig> | undefined,
+): boolean {
+  // Check top-level disable-all value
+  if (animation === 'disable-all') {
+    return true;
+  }
+
+  // Check state property in config objects
+  if (typeof animation === 'object' && animation !== null && 'state' in animation) {
+    const state = animation.state;
+    return state === 'disable-all';
+  }
+
+  return false;
+}
+
+/**
+ * Get animation state including config and disabled status
+ * @param animation - Animation configuration
+ * @returns Object with animationConfig and isAnimationDisabled
+ */
+export function getAnimationState<TConfig extends Record<string, any>>(
+  animation: Animation<TConfig> | undefined,
+): {
+  animationConfig: TConfig | undefined;
+  isAnimationDisabled: boolean;
+} {
+  const isDisabled = isAnimationDisabled(animation);
+  // Always extract config when it's an object, regardless of disabled state
+  // This allows users to customize colors/properties even when animations are disabled
+  const config =
+    typeof animation === 'object' && animation !== null ? (animation as TConfig) : undefined;
+
+  return {
+    animationConfig: config,
+    isAnimationDisabled: isDisabled,
+  };
+}
+
+/**
+ * Get root animation state including config, disabled status, and cascade flag
+ * @param animation - Root animation configuration
+ * @returns Object with animationConfig, isAnimationDisabled, and isAllAnimationsDisabled
+ */
+export function getRootAnimationState<TConfig extends Record<string, any>>(
+  animation: AnimationRoot<TConfig> | undefined,
+): {
+  animationConfig: TConfig | undefined;
+  isAnimationDisabled: boolean;
+  isAllAnimationsDisabled: boolean;
+} {
+  const shouldCascade = shouldDisableAll(animation);
+  const isDisabled = isAnimationDisabled(animation) || shouldCascade;
+  // Always extract config when it's an object, regardless of disabled state
+  // This allows users to customize colors/properties even when animations are disabled
+  const config =
+    typeof animation === 'object' && animation !== null ? (animation as TConfig) : undefined;
+
+  return {
+    animationConfig: config,
+    isAnimationDisabled: isDisabled,
+    isAllAnimationsDisabled: shouldCascade,
+  };
+}
+
+/**
+ * Get animation value property or return default
+ * Extracts a property from the animation value config object
+ *
+ * @param options - Object containing animationValue, property, and defaultValue
+ * @param options.animationValue - The animation value configuration
+ * @param options.property - Property name to extract
+ * @param options.defaultValue - Default value if property is not found
+ * @returns The property value or default (never undefined)
+ *
+ * @example
+ * const scaleValue = getAnimationValueProperty({
+ *   animationValue: animation?.scale,
+ *   property: 'value',
+ *   defaultValue: 0.95
+ * });
+ */
+export function getAnimationValueProperty<
+  TConfig extends Record<string, any>,
+  K extends keyof TConfig,
+  D extends NonNullable<TConfig[K]>,
+>(options: {
+  animationValue: AnimationValue<TConfig> | undefined;
+  property: K;
+  defaultValue: D;
+}): D {
+  // If animation value is undefined, return default
+  if (options.animationValue === undefined) {
+    return options.defaultValue;
+  }
+
+  // Return the property value if it exists, otherwise return default
+  return options.animationValue[options.property] ?? options.defaultValue;
+}
+
+/**
+ * Get animation value merged config or return default
+ * Merges the animation value config with defaults, useful when you need multiple properties
+ *
+ * @param options - Object containing animationValue, property, and defaultValue
+ * @param options.animationValue - The animation value configuration
+ * @param options.property - Property name to extract from the config
+ * @param options.defaultValue - Default configuration object
+ * @returns The merged config object or default
+ *
+ * @example
+ * const scaleConfig = getAnimationValueMergedConfig({
+ *   animationValue: animation?.scale,
+ *   property: 'timingConfig',
+ *   defaultValue: { duration: 150 }
+ * });
+ */
+export function getAnimationValueMergedConfig<
+  TConfig extends Record<string, any>,
+  K extends keyof TConfig,
+>(options: {
+  animationValue: AnimationValue<TConfig> | undefined;
+  property: K;
+  defaultValue: TConfig[K];
+}): TConfig[K] {
+  // If animation value is undefined, return default
+  if (options.animationValue === undefined) {
+    return options.defaultValue;
+  }
+
+  const value = options.animationValue[options.property];
+
+  // If the specific property value is undefined or not an object, return default
+  if (value === undefined || typeof value !== 'object') {
+    return options.defaultValue;
+  }
+
+  // Merge with defaults to ensure all properties exist
+  return { ...options.defaultValue, ...value };
+}
+
+/**
+ * Determine if animations should be disabled based on disabled flags
+ * Priority: isAllAnimationsDisabled > isAnimationDisabled
+ *
+ * @param options - Object containing isAnimationDisabled and isAllAnimationsDisabled
+ * @param options.isAnimationDisabled - Whether animation is explicitly disabled
+ * @param options.isAllAnimationsDisabled - Whether all animations should be disabled (cascading from root/global)
+ * @returns true if animations should be disabled, false otherwise
+ *
+ * @example
+ * const isDisabled = getIsAnimationDisabledValue({
+ *   isAnimationDisabled: false,
+ *   isAllAnimationsDisabled: true
+ * });
+ * // Returns: true (all animations disabled takes priority)
+ */
+export function getIsAnimationDisabledValue(options: {
+  isAnimationDisabled: boolean;
+  isAllAnimationsDisabled: boolean | undefined;
+}): boolean {
+  const { isAnimationDisabled: isDisabled, isAllAnimationsDisabled } = options;
+
+  // First priority: if all animations are disabled, return true
+  if (isAllAnimationsDisabled === true) {
+    return true;
+  }
+
+  // Second priority: if this animation is disabled, return true
+  if (isDisabled) {
+    return true;
+  }
+
+  // Default: animations are enabled
+  return false;
+}
+
+/**
+ * Combine global, parent, and own animation disabled states
+ * Priority: Global > Parent > Own (global wins if enabled)
+ *
+ * @param options - Object containing globalIsAllAnimationsDisabled, parentIsAllAnimationsDisabled, and ownIsAllAnimationsDisabled
+ * @param options.globalIsAllAnimationsDisabled - Whether global provider has disable-all (from GlobalAnimationSettingsProvider)
+ * @param options.parentIsAllAnimationsDisabled - Whether parent context has disable-all (from AnimationSettingsContext)
+ * @param options.ownIsAllAnimationsDisabled - Whether own animation prop has disable-all
+ * @returns Combined isAllAnimationsDisabled value (global || parent || own)
+ *
+ * @example
+ * const combined = getCombinedAnimationDisabledState({
+ *   globalIsAllAnimationsDisabled: true,
+ *   parentIsAllAnimationsDisabled: false,
+ *   ownIsAllAnimationsDisabled: false
+ * });
+ * // Returns: true (global wins)
+ */
+export function getCombinedAnimationDisabledState(options: {
+  globalIsAllAnimationsDisabled?: boolean;
+  parentIsAllAnimationsDisabled: boolean | undefined;
+  ownIsAllAnimationsDisabled: boolean;
+}): boolean {
+  const {
+    globalIsAllAnimationsDisabled,
+    parentIsAllAnimationsDisabled,
+    ownIsAllAnimationsDisabled,
+  } = options;
+
+  // Global always wins if it has disable-all
+  if (globalIsAllAnimationsDisabled === true) {
+    return true;
+  }
+
+  // Parent wins if it has disable-all
+  if (parentIsAllAnimationsDisabled === true) {
+    return true;
+  }
+
+  // Otherwise use own value
+  return ownIsAllAnimationsDisabled;
+}

package/src/components/Accordion/index.tsx

@@ -0,0 +1,385 @@
+import { cloneElement, forwardRef, isValidElement, useMemo, type ReactNode } from 'react';
+import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  AccordionContentRoot as AccordionContentRootPrimitive,
+  AccordionItemRoot as AccordionItemRootPrimitive,
+  AccordionRoot as AccordionRootPrimitive,
+  AccordionTriggerRoot as AccordionTriggerRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useAccordionItemContext,
+  type IAccordionContentProps,
+  type IAccordionItemProps,
+  type IAccordionProps,
+  type IAccordionTriggerProps,
+} from '@cdx-ui/primitives';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import {
+  accordionContentVariants,
+  accordionDescriptionVariants,
+  accordionIndicatorVariants,
+  accordionItemVariants,
+  accordionLabelVariants,
+  accordionLeadingSlotVariants,
+  accordionMetaVariants,
+  accordionRootVariants,
+  accordionTitleVariants,
+  accordionTriggerVariants,
+} from './styles';
+
+const ITEM_SCOPE = 'ACCORDION_ITEM';
+
+interface AccordionItemStyleContext {
+  fullBleed?: boolean;
+}
+
+const useAccordionItemStyleContext = (): Required<AccordionItemStyleContext> => {
+  const ctx = useStyleContext(ITEM_SCOPE) as AccordionItemStyleContext | undefined;
+  return {
+    fullBleed: ctx?.fullBleed ?? false,
+  };
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export type AccordionProps = IAccordionProps & {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+const AccordionRoot = forwardRef<View, AccordionProps>(
+  ({ asChild, className, style, children, ...props }, ref) => (
+    <AccordionRootPrimitive
+      ref={ref}
+      asChild={asChild}
+      className={cn(accordionRootVariants(), className)}
+      style={style}
+      {...props}
+    >
+      {children}
+    </AccordionRootPrimitive>
+  ),
+);
+
+AccordionRoot.displayName = 'Accordion';
+
+// =============================================================================
+// ITEM
+// =============================================================================
+
+export interface AccordionItemProps extends IAccordionItemProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  /** Removes horizontal padding so trigger and content can render edge to edge. @default false */
+  fullBleed?: boolean;
+  /** Renders a separator below the item when true. @default true */
+  showSeparator?: boolean;
+}
+
+const AccordionItem = forwardRef<View, AccordionItemProps>(
+  (
+    { asChild, className, style, children, fullBleed = false, showSeparator = true, ...props },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [ITEM_SCOPE]: { fullBleed } }), [parent, fullBleed]);
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <AccordionItemRootPrimitive
+          ref={ref}
+          asChild={asChild}
+          className={cn(accordionItemVariants({ showSeparator }), className)}
+          style={style}
+          {...props}
+        >
+          {children}
+        </AccordionItemRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+AccordionItem.displayName = 'Accordion.Item';
+
+// =============================================================================
+// TRIGGER
+// =============================================================================
+
+export interface AccordionTriggerProps extends IAccordionTriggerProps {
+  /**
+   * Substitute the rendered trigger element with the single child. The child must
+   * be another Forge primitive (IconButton, Chip, Button) — anything whose
+   * underlying Pressable accepts Pressable-shaped handlers. When set, the
+   * auto-injected expand indicator is skipped and `accordionTriggerVariants` is not
+   * applied so the substituted component's own appearance wins.
+   */
+  asChild?: boolean;
+  /**
+   * Replaces the default open/closed chevron. Pass `null` to suppress the
+   * indicator. When `asChild` is set, only an explicitly provided indicator is
+   * appended to the substituted child.
+   */
+  indicator?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionTrigger = forwardRef<React.ComponentRef<typeof Pressable>, AccordionTriggerProps>(
+  ({ className, style, children, asChild, indicator, accessibilityLabel, ...props }, ref) => {
+    const { fullBleed } = useAccordionItemStyleContext();
+
+    const computedClassName = asChild
+      ? className
+      : cn(accordionTriggerVariants({ fullBleed }), className);
+    const triggerIndicator =
+      indicator === undefined ? asChild ? undefined : <AccordionIndicator /> : indicator;
+    const triggerChildren =
+      asChild &&
+      triggerIndicator !== undefined &&
+      isValidElement<{ children?: ReactNode }>(children)
+        ? cloneElement(children, undefined, children.props.children, triggerIndicator)
+        : children;
+
+    return (
+      <AccordionTriggerRootPrimitive
+        ref={ref}
+        asChild={asChild}
+        accessibilityLabel={accessibilityLabel}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {asChild ? (
+          triggerChildren
+        ) : (
+          <>
+            {children}
+            {triggerIndicator}
+          </>
+        )}
+      </AccordionTriggerRootPrimitive>
+    );
+  },
+);
+
+AccordionTrigger.displayName = 'Accordion.Trigger';
+
+// =============================================================================
+// INDICATOR
+// =============================================================================
+
+export interface AccordionIndicatorProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionIndicator = forwardRef<View, AccordionIndicatorProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { isOpen } = useAccordionItemContext();
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionIndicatorVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'accordion-indicator',
+            state: isOpen ? 'open' : 'closed',
+          }),
+        )}
+      >
+        {children ?? <Icon as={KeyboardArrowDown} size={24} />}
+      </Comp>
+    );
+  },
+);
+
+AccordionIndicator.displayName = 'Accordion.Indicator';
+
+// =============================================================================
+// SLOTS
+// =============================================================================
+
+export interface AccordionLeadingSlotProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  'aria-hidden'?: boolean;
+}
+
+const AccordionLeadingSlot = forwardRef<View, AccordionLeadingSlotProps>(
+  ({ asChild, className, style, 'aria-hidden': ariaHidden, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        accessibilityElementsHidden={ariaHidden !== false}
+        aria-hidden={ariaHidden ?? true}
+        className={cn(accordionLeadingSlotVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-leading' }))}
+      />
+    );
+  },
+);
+
+AccordionLeadingSlot.displayName = 'Accordion.LeadingSlot';
+
+export interface AccordionLabelProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const AccordionLabel = forwardRef<View, AccordionLabelProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionLabelVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-label' }))}
+      />
+    );
+  },
+);
+
+AccordionLabel.displayName = 'Accordion.Label';
+
+export interface AccordionTitleProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const AccordionTitle = forwardRef<Text, AccordionTitleProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionTitleVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-title' }))}
+      />
+    );
+  },
+);
+
+AccordionTitle.displayName = 'Accordion.Title';
+
+export interface AccordionDescriptionProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const AccordionDescription = forwardRef<Text, AccordionDescriptionProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionDescriptionVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-description' }))}
+      />
+    );
+  },
+);
+
+AccordionDescription.displayName = 'Accordion.Description';
+
+export interface AccordionMetaProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const AccordionMeta = forwardRef<Text, AccordionMetaProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(accordionMetaVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion-meta' }))}
+      />
+    );
+  },
+);
+
+AccordionMeta.displayName = 'Accordion.Meta';
+
+// =============================================================================
+// CONTENT
+// =============================================================================
+
+export interface AccordionContentProps extends IAccordionContentProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AccordionContent = forwardRef<View, AccordionContentProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { fullBleed } = useAccordionItemStyleContext();
+
+    return (
+      <AccordionContentRootPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={cn(accordionContentVariants({ fullBleed }), className)}
+        style={style}
+        {...props}
+      >
+        {children}
+      </AccordionContentRootPrimitive>
+    );
+  },
+);
+
+AccordionContent.displayName = 'Accordion.Content';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type AccordionCompoundComponent = typeof AccordionRoot & {
+  Item: typeof AccordionItem;
+  Trigger: typeof AccordionTrigger;
+  LeadingSlot: typeof AccordionLeadingSlot;
+  Label: typeof AccordionLabel;
+  Title: typeof AccordionTitle;
+  Description: typeof AccordionDescription;
+  Meta: typeof AccordionMeta;
+  Indicator: typeof AccordionIndicator;
+  Content: typeof AccordionContent;
+};
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  LeadingSlot: AccordionLeadingSlot,
+  Label: AccordionLabel,
+  Title: AccordionTitle,
+  Description: AccordionDescription,
+  Meta: AccordionMeta,
+  Indicator: AccordionIndicator,
+  Content: AccordionContent,
+}) as AccordionCompoundComponent;