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

package/src/field/createFieldLabel.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IFieldLabelProps } from './types';
+
+export const createFieldLabel = <T,>(BaseFormLabel: React.ComponentType<T>) =>
+  forwardRef<unknown, IFieldLabelProps & { children?: React.ReactNode }>(
+    ({ children, htmlFor: htmlForProp, requiredIndicator, ...props }, ref) => {
+      const field = useFormControlContext();
+      const fieldId = field.id;
+      const labelId = field.labelId;
+
+      /** Must match `useFormControl` default: `props.id ?? \`${field.id}-input\``. */
+      const htmlFor = htmlForProp ?? (fieldId ? `${fieldId}-input` : undefined);
+
+      return (
+        <BaseFormLabel
+          ref={ref}
+          {...(props as T)}
+          id={labelId}
+          htmlFor={htmlFor}
+          {...dataAttributes({ invalid: field.isInvalid, required: field.isRequired })}
+        >
+          {children}
+          {field.isRequired ? requiredIndicator : null}
+        </BaseFormLabel>
+      );
+    },
+  );

package/src/field/createFieldRoot.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import { useFormControlRoot, FormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IFieldRootProps } from './types';
+
+export const createFieldRoot = <T,>(BaseFormField: React.ComponentType<T>) =>
+  forwardRef(
+    ({ children, ...props }: IFieldRootProps & { children?: React.ReactNode }, ref?: unknown) => {
+      const { htmlProps, ...context } = useFormControlRoot(props);
+
+      return (
+        <FormControlContext.Provider value={context}>
+          <BaseFormField
+            ref={ref}
+            {...(htmlProps as T)}
+            {...dataAttributes({
+              disabled: context.isDisabled,
+              invalid: context.isInvalid,
+              required: context.isRequired,
+            })}
+          >
+            {children}
+          </BaseFormField>
+        </FormControlContext.Provider>
+      );
+    },
+  );

package/src/field/index.tsx

@@ -0,0 +1,68 @@
+import type React from 'react';
+import { createFieldError } from './createFieldError';
+import { createFieldErrorIcon } from './createFieldErrorIcon';
+import { createFieldErrorText } from './createFieldErrorText';
+import { createFieldRoot } from './createFieldRoot';
+import { createFieldHelper } from './createFieldHelper';
+import { createFieldHelperText } from './createFieldHelperText';
+import { createFieldLabel } from './createFieldLabel';
+import type { IFieldComponentType } from './types';
+
+export type {
+  IFieldRootProps,
+  IFieldLabelProps,
+  IFieldHelperProps,
+  IFieldHelperTextProps,
+  IFieldErrorProps,
+  IFieldErrorTextProps,
+  IFieldErrorIconProps,
+  IFieldComponentType,
+} from './types';
+
+export function createField<Root, Label, Helper, HelperText, Error, ErrorText, ErrorIcon>({
+  Root,
+  Label,
+  Helper,
+  HelperText,
+  Error,
+  ErrorText,
+  ErrorIcon,
+}: {
+  Root: React.ComponentType<Root>;
+  Label: React.ComponentType<Label>;
+  Helper: React.ComponentType<Helper>;
+  HelperText: React.ComponentType<HelperText>;
+  Error: React.ComponentType<Error>;
+  ErrorText: React.ComponentType<ErrorText>;
+  ErrorIcon: React.ComponentType<ErrorIcon>;
+}) {
+  const FieldRoot = createFieldRoot(Root);
+  FieldRoot.displayName = 'FieldPrimitive';
+
+  const FieldLabel = createFieldLabel(Label);
+  FieldLabel.displayName = 'FieldPrimitive.Label';
+
+  const FieldHelper = createFieldHelper(Helper);
+  FieldHelper.displayName = 'FieldPrimitive.Helper';
+
+  const FieldHelperText = createFieldHelperText(HelperText);
+  FieldHelperText.displayName = 'FieldPrimitive.HelperText';
+
+  const FieldError = createFieldError(Error);
+  FieldError.displayName = 'FieldPrimitive.Error';
+
+  const FieldErrorText = createFieldErrorText(ErrorText);
+  FieldErrorText.displayName = 'FieldPrimitive.ErrorText';
+
+  const FieldErrorIcon = createFieldErrorIcon(ErrorIcon);
+  FieldErrorIcon.displayName = 'FieldPrimitive.ErrorIcon';
+
+  return Object.assign(FieldRoot, {
+    Label: FieldLabel,
+    Helper: FieldHelper,
+    HelperText: FieldHelperText,
+    Error: FieldError,
+    ErrorText: FieldErrorText,
+    ErrorIcon: FieldErrorIcon,
+  }) as IFieldComponentType<Root, Label, Helper, HelperText, Error, ErrorText, ErrorIcon>;
+}

package/src/field/types.tsx

@@ -0,0 +1,78 @@
+import type React from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+
+/**
+ * Props for a single form field (`Form.Field`).
+ * Provides field-level context (name, validation state, ids) to children.
+ *
+ * **Initial focus:** use `autoFocus` on `Input.Field` (or your control). `TextInput` / DOM
+ * inputs support it natively. Do not rely on `Form.Field` for autofocus — it does not forward
+ * to a single child.
+ *
+ * **Submit UX:** "focus first invalid on error" needs form-level validation state; not built in yet.
+ */
+export interface IFieldRootProps extends ViewProps {
+  /** Unique id for this field. Auto-generated if not provided. */
+  readonly id?: string;
+  /**
+   * Field name for form submission. Passed through context so child inputs
+   * automatically receive it as their `name` attribute for `FormData` support.
+   */
+  readonly name?: string;
+  /** If true, the field is marked as invalid. Controls error visibility. */
+  readonly isInvalid?: boolean;
+  /** If true, the field is marked as required. Shows asterisk on label. */
+  readonly isRequired?: boolean;
+  /** If true, the field is disabled. */
+  readonly isDisabled?: boolean;
+  /** If true, the field is read-only. */
+  readonly isReadOnly?: boolean;
+}
+
+export interface IFieldLabelProps extends TextProps {
+  /**
+   * Associates the label with a control `id` on web (`<label htmlFor>`).
+   * If omitted, defaults to the same id `Input.Field` gets from form context: `fieldId + "-input"`.
+   */
+  readonly htmlFor?: string;
+  /**
+   * Element to render after the label text when the field is required.
+   * Rendered by the primitive (which owns the form-control context) so the
+   * styled layer never needs to read `FormControlContext` across packages.
+   */
+  readonly requiredIndicator?: React.ReactNode;
+}
+
+export interface IFieldHelperProps extends ViewProps {}
+
+export interface IFieldHelperTextProps extends TextProps {}
+
+export interface IFieldErrorProps extends ViewProps {}
+
+export interface IFieldErrorTextProps extends TextProps {}
+
+export interface IFieldErrorIconProps extends ViewProps {}
+
+export type IFieldComponentType<Root, Label, Helper, HelperText, Error, ErrorText, ErrorIcon> =
+  React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Root> & IFieldRootProps> & {
+    Label: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<Label> & IFieldLabelProps
+    >;
+    Helper: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<Helper> & IFieldHelperProps
+    >;
+    HelperText: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<HelperText> & IFieldHelperTextProps
+    >;
+    Error: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<Error> & IFieldErrorProps
+    >;
+    ErrorText: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<ErrorText> & IFieldErrorTextProps
+    >;
+    ErrorIcon: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<ErrorIcon> & IFieldErrorIconProps
+    >;
+  };
+
+type InnerForwardRefExoticComponent<T> = React.PropsWithoutRef<T> & React.RefAttributes<unknown>;

package/src/form/createFormRoot.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import type { IFormRootProps, IFormComponentType } from './types';
+
+// TODO: Handle web submission (button type submit)
+
+export const createFormRoot = <T,>(BaseFormRoot: React.ComponentType<T>): IFormComponentType<T> =>
+  forwardRef(
+    ({ children, ...props }: IFormRootProps & { children?: React.ReactNode }, ref?: unknown) => (
+      <BaseFormRoot ref={ref} {...(props as T)}>
+        {children}
+      </BaseFormRoot>
+    ),
+  );

package/src/form/index.tsx

@@ -0,0 +1,12 @@
+import type React from 'react';
+import { createFormRoot } from './createFormRoot';
+
+export type { IFormRootProps, IFormComponentType } from './types';
+
+export function createForm<Root>({ Root }: { Root: React.ComponentType<Root> }) {
+  const FormRoot = createFormRoot(Root);
+
+  FormRoot.displayName = 'FormPrimitive';
+
+  return FormRoot;
+}

package/src/form/types.tsx

@@ -0,0 +1,16 @@
+import type React from 'react';
+
+/**
+ * Props for the Form container (`<form>` on web, `<View>` on RN).
+ * Does NOT provide field-level context — use `Form.Field` for that.
+ *
+ * Web-only submit props (`onSubmit`, `action`, `method`) belong in the
+ * platform-specific base component (`FormRoot.web.tsx`), not here.
+ */
+export interface IFormRootProps {}
+
+export type IFormComponentType<Root> = React.ForwardRefExoticComponent<
+  InnerForwardRefExoticComponent<Root> & IFormRootProps
+>;
+
+type InnerForwardRefExoticComponent<T> = React.PropsWithoutRef<T> & React.RefAttributes<unknown>;

package/src/index.ts

@@ -1,7 +1,16 @@
+export * from './avatar';
 export * from './button';
 export * from './checkbox';
+export * from './dialog';
+export * from './field';
+export * from './form';
 export * from './input';
+export * from './otp-input';
+export * from './link';
+export * from './list-item';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
 export * from './switch';
+export * from './progress';
 export type { InteractionState } from './types';
+export { dataAttributes } from './utils/dataAttributes';

package/src/input/createInputField.tsx

@@ -6,7 +6,7 @@ import {
   Platform,
   type TextInputKeyPressEvent,
 } from 'react-native';
-import { mergeRefs, useFormControl } from '@cdx-ui/utils';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
 import { useInputContext } from './context';
 import type { IInputProps } from './types';
@@ -18,7 +18,8 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
         children,
         onKeyPress,
         type = 'text',
-        'aria-label': ariaLabel = 'Input Field',
+        accessibilityLabel,
+        'aria-label': ariaLabelProp,
         secureTextEntry,
         editable,
         disabled,
@@ -46,15 +47,22 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
         id: props.id,
       });
 
+      const field = useFormControlContext();
+
       const handleFocus = (focusState: boolean, callback: any) => {
         setIsFocused(focusState);
         callback();
       };
 
-      const mergedRef = mergeRefs(ref, inputFieldRef);
+      const mergedRef =
+        Platform.OS === 'web'
+          ? mergeRefs(ref, inputFieldRef)
+          : mergeRefs(ref, inputFieldRef, field.inputRef);
 
       const isEffectivelyDisabled = isDisabled || inputProps.disabled;
 
+      const ariaLabel = accessibilityLabel ?? ariaLabelProp;
+
       const editableProp = useMemo(() => {
         if (editable !== undefined) {
           return editable;
@@ -64,6 +72,7 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
 
       return (
         <BaseInputField
+          {...inputProps}
           {...(props as T)}
           type={type}
           {...dataAttributes({
@@ -78,6 +87,7 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
           disabled={isEffectivelyDisabled}
           secureTextEntry={secureTextEntry || type === 'password'}
           accessible
+          accessibilityLabel={ariaLabel}
           aria-label={ariaLabel}
           aria-required={isRequired || inputProps.required}
           aria-invalid={isInvalid || inputProps['aria-invalid']}

package/src/input/index.tsx

@@ -1,5 +1,5 @@
+import type React from 'react';
 import { createInputField } from './createInputField';
-import { createInputIcon } from './createInputIcon';
 import { createInputRoot } from './createInputRoot';
 import { createInputSlot } from './createInputSlot';
 import type { IInputComponentType } from './types';
@@ -12,40 +12,27 @@ export type {
   IInputSlotProps,
 } from './types';
 
-export const createInput = <
+export function createInput<
   RootProps,
-  IconProps,
   SlotProps,
   FieldProps,
   RootRef = unknown,
   FieldRef = unknown,
->({
-  Root,
-  Icon,
-  Slot,
-  Field,
-}: {
+>(BaseComponents: {
   Root: React.ComponentType<RootProps>;
-  Icon: React.ComponentType<IconProps>;
   Slot: React.ComponentType<SlotProps>;
   Field: React.ComponentType<FieldProps>;
-}) => {
-  const Input = createInputRoot(Root) as any;
-  Input.Icon = createInputIcon(Icon);
-  Input.Slot = createInputSlot(Slot);
-  Input.Field = createInputField(Field);
+}) {
+  const Input = createInputRoot(BaseComponents.Root);
+  const Slot = createInputSlot(BaseComponents.Slot);
+  const Field = createInputField(BaseComponents.Field);
 
-  Input.displayName = 'Input';
-  Input.Icon.displayName = 'Input.Icon';
-  Input.Slot.displayName = 'Input.Slot';
-  Input.Field.displayName = 'Input.Field';
+  Input.displayName = 'InputPrimitive';
+  Slot.displayName = 'InputPrimitive.Slot';
+  Field.displayName = 'InputPrimitive.Field';
 
-  return Input as IInputComponentType<
-    RootProps,
-    IconProps,
-    SlotProps,
-    FieldProps,
-    RootRef,
-    FieldRef
-  >;
-};
+  return Object.assign(Input, {
+    Slot,
+    Field,
+  }) as IInputComponentType<RootProps, SlotProps, FieldProps, RootRef, FieldRef>;
+}

package/src/input/types.ts

@@ -93,7 +93,6 @@ export interface IInputSlotProps extends ViewProps {
 
 export type IInputComponentType<
   RootProps,
-  IconProps,
   SlotProps,
   FieldProps,
   RootRef = unknown,
@@ -101,9 +100,6 @@ export type IInputComponentType<
 > = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<RootProps & IInputFieldProps> & React.RefAttributes<RootRef>
 > & {
-  Icon: React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<IconProps> & React.RefAttributes<unknown>
-  >;
   Slot: React.ForwardRefExoticComponent<
     React.PropsWithoutRef<SlotProps & IInputSlotProps> & React.RefAttributes<unknown>
   >;

package/src/link/LinkProvider.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { LinkAction } from './types';
+
+export interface LinkConfig {
+  /**
+   * Global navigation handler for `<Link>` instances whose `href` passes the
+   * `shouldNavigate` check. Called with the `href` and the per-instance `action`.
+   *
+   * @param href   - The URL or path to navigate to.
+   * @param action - Navigation intent from the per-instance `action` prop:
+   *                 `'navigate'` (default) — smart navigation, avoids duplicates.
+   *                 `'push'` — always pushes a new entry onto the stack.
+   *                 `'replace'` — replaces the current entry without stacking.
+   */
+  navigate: (href: string, action: LinkAction) => void | Promise<void>;
+
+  /**
+   * Optional predicate evaluated at **render time** to decide whether the
+   * provider should handle a given `href`.
+   *
+   * - Returns `true`  → the provider's `navigate` is called on press;
+   *   on web the native `<a href>` is **removed** so the browser doesn't
+   *   follow the link.
+   * - Returns `false` → the provider is bypassed; on web the `<a href>` is
+   *   preserved (cmd-click, SEO, etc.); on native `Linking.openURL` is used.
+   *
+   * Defaults to `() => true` when omitted (all hrefs go through the provider).
+   */
+  shouldNavigate?: (href: string) => boolean;
+}
+
+const LinkConfigContext = createContext<LinkConfig | undefined>(undefined);
+
+export function LinkProvider({
+  navigate,
+  shouldNavigate,
+  children,
+}: LinkConfig & { children: ReactNode }) {
+  return (
+    <LinkConfigContext.Provider value={{ navigate, shouldNavigate }}>
+      {children}
+    </LinkConfigContext.Provider>
+  );
+}
+
+LinkProvider.displayName = 'LinkProvider';
+
+export function useLinkConfig(): LinkConfig | undefined {
+  return useContext(LinkConfigContext);
+}

package/src/link/createLink.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocusRing, useFocus } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useLink } from './useLink';
+import type { ILinkProps } from './types';
+
+export const createLink = <RootT, R = unknown>({ Root }: { Root: React.ComponentType<RootT> }) =>
+  forwardRef(
+    (
+      {
+        children,
+        isHovered: isHoveredProp,
+        isPressed: isPressedProp,
+        isFocused: isFocusedProp,
+        isFocusVisible: isFocusVisibleProp,
+        href,
+        onPress,
+        action,
+        webProps,
+        ...props
+      }: ILinkProps,
+      ref: React.ForwardedRef<R>,
+    ) => {
+      const { isFocused, focusProps } = useFocus();
+      const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+        isFocusVisible: boolean;
+        focusProps: typeof focusProps;
+      };
+      const { pressProps, isPressed } = usePress({});
+      const { isHovered, hoverProps } = useHover();
+
+      const { linkProps } = useLink({
+        href,
+        onPress,
+        action,
+        webProps,
+      });
+
+      const interactionAttrs = dataAttributes({
+        hover: isHoveredProp || isHovered,
+        focus: isFocusedProp || isFocused,
+        active: isPressedProp || isPressed,
+        focusVisible: isFocusVisibleProp || isFocusVisible,
+      });
+
+      return (
+        <Root
+          ref={ref}
+          {...interactionAttrs}
+          {...linkProps}
+          {...(props as RootT)}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(props?.onFocus, focusProps.onFocus),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(props?.onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Root>
+      );
+    },
+  );

package/src/link/index.tsx

@@ -0,0 +1,5 @@
+export { createLink } from './createLink';
+export { LinkProvider } from './LinkProvider';
+export type { LinkConfig } from './LinkProvider';
+export { useLink } from './useLink';
+export type { ILinkProps, IUseLinkProp, LinkAction } from './types';

package/src/link/types.ts

@@ -0,0 +1,47 @@
+import type React from 'react';
+import type { GestureResponderEvent, PressableProps } from 'react-native';
+
+/**
+ * Navigation action forwarded to the `LinkProvider.navigate` callback.
+ *
+ * - `'navigate'` — (default) Smart navigation. In React Navigation this
+ *    avoids duplicating a screen that is already in the stack. In expo-router
+ *    it maps to `router.navigate()`.
+ * - `'push'`     — Always pushes a new screen onto the navigation stack,
+ *    even if the destination is already present.
+ * - `'replace'`  — Replaces the current screen without adding to the stack.
+ *    Useful for post-login redirects or wizard flows.
+ */
+export type LinkAction = 'navigate' | 'push' | 'replace';
+
+export interface ILinkProps extends PressableProps {
+  /**
+   * URL that should be opened on Link press
+   */
+  href?: string | undefined;
+  /**
+   * Callback that will be invoked on Link press
+   */
+  onPress?: ((event?: GestureResponderEvent) => void) | null | undefined;
+  /**
+   * Navigation action forwarded to the `LinkProvider`.
+   * Defaults to `'navigate'`.
+   */
+  action?: LinkAction;
+  isPressed?: boolean;
+  isHovered?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  /**
+   * HTML anchor attributes applied only on web. Ignored on native platforms.
+   * `target`, `rel`, and `download` are forwarded via react-native-web's `hrefAttrs`.
+   */
+  webProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+
+export interface IUseLinkProp {
+  href?: string;
+  onPress: ((event?: GestureResponderEvent) => void) | null | undefined;
+  action?: LinkAction;
+  webProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}

package/src/link/useLink.ts

@@ -0,0 +1,54 @@
+import { Linking, Platform } from 'react-native';
+import type { AccessibilityRole, GestureResponderEvent } from 'react-native';
+import { useLinkConfig } from './LinkProvider';
+import type { IUseLinkProp } from './types';
+
+function defaultNavigate(href: string): void {
+  Linking.canOpenURL(href)
+    .then((supported) => {
+      if (supported) return Linking.openURL(href);
+      console.warn(`Cannot open URL: ${href}`);
+    })
+    .catch((err: unknown) => console.error('Failed to open URL', err));
+}
+
+export function useLink(props: IUseLinkProp) {
+  const { href, onPress, action = 'navigate', webProps } = props;
+  const config = useLinkConfig();
+
+  const providerHandles = !!config && !!href && (config.shouldNavigate?.(href) ?? true);
+
+  let platformLinkProps = {};
+
+  if (Platform.OS === 'web') {
+    platformLinkProps = {
+      href: providerHandles ? undefined : href,
+      hrefAttrs: webProps,
+      onPress: (event: GestureResponderEvent) => {
+        onPress?.(event);
+        if (providerHandles) void config.navigate(href, action);
+      },
+    };
+  } else {
+    platformLinkProps = {
+      onPress: (event: GestureResponderEvent) => {
+        onPress?.(event);
+        if (href) {
+          if (providerHandles) {
+            void config.navigate(href, action);
+          } else {
+            defaultNavigate(href);
+          }
+        }
+      },
+    };
+  }
+
+  return {
+    linkProps: {
+      ...platformLinkProps,
+      role: 'link' as AccessibilityRole,
+      accessible: true,
+    },
+  };
+}

package/src/list-item/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { IListItemContextValue } from './types';
+
+export const [ListItemProvider, useListItemContext] =
+  createContext<IListItemContextValue>('ListItemContext');

package/src/list-item/createListItemContent.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IListItemContentProps } from './types';
+
+const contentStyle = {
+  flex: 1,
+  flexDirection: 'column' as const,
+  minWidth: 0,
+};
+
+export const createListItemContent = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: IListItemContentProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'list-item-content',
+      })}
+      ref={ref as React.Ref<T>}
+      style={[contentStyle, style]}
+    >
+      {children}
+    </Base>
+  ));