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

package/src/otp-input/createOtpInputRoot.tsx

@@ -0,0 +1,179 @@
+import type React from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import type { TextInput } from 'react-native';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { applyOtpInputChange } from './utils/applyValueChange';
+import { OtpCellIndexProvider, OtpInputProvider } from './context';
+import { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
+import type { IOtpInputRootProps } from './types';
+
+export const createOtpInputRoot = <RootProps,>(
+  BaseRoot: React.ComponentType<RootProps>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- slot components are generic across design systems
+  OtpCell: React.ComponentType<any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  OtpField: React.ComponentType<any>,
+) =>
+  forwardRef<unknown, IOtpInputRootProps & RootProps>(
+    (
+      {
+        cellCount,
+        value,
+        onChangeText,
+        onComplete,
+        isDisabled: isDisabledProp,
+        isInvalid: isInvalidProp,
+        isReadOnly: isReadOnlyProp,
+        smsOtpAutofill = true,
+        filterInput,
+        allowedCharacters,
+        characterPattern,
+        getCellProps,
+        cellTestIdPrefix,
+        accessibilityLabel: rootAccessibilityLabel,
+        ...rest
+      },
+      ref,
+    ) => {
+      const form = useFormControlContext();
+      const isDisabled = isDisabledProp ?? form.isDisabled ?? false;
+      const isInvalid = isInvalidProp ?? form.isInvalid ?? false;
+      const isReadOnly = isReadOnlyProp ?? form.isReadOnly ?? false;
+
+      const fieldRefs = useRef<(TextInput | null)[]>([]);
+      const focusAfterApply = useRef<number | null>(null);
+      const prevLenRef = useRef(value.length);
+      const prevValueRef = useRef(value);
+
+      const filter = useMemo(() => {
+        if (filterInput) {
+          return filterInput;
+        }
+        if (allowedCharacters !== undefined) {
+          return filterAllowedCharacters(allowedCharacters);
+        }
+        if (characterPattern !== undefined) {
+          return filterByRegExp(characterPattern);
+        }
+        return filterDigits;
+      }, [filterInput, allowedCharacters, characterPattern]);
+
+      const setFieldRef = useCallback((index: number, el: TextInput | null) => {
+        fieldRefs.current[index] = el;
+      }, []);
+
+      const focusCell = useCallback(
+        (index: number) => {
+          const safe = Math.max(0, Math.min(index, cellCount - 1));
+          fieldRefs.current[safe]?.focus();
+        },
+        [cellCount],
+      );
+
+      const handleFieldChange = useCallback(
+        (index: number, text: string) => {
+          const { nextValue, focusIndex } = applyOtpInputChange(
+            value,
+            index,
+            text,
+            cellCount,
+            filter,
+          );
+          if (nextValue !== value) {
+            onChangeText(nextValue);
+          }
+          focusAfterApply.current = focusIndex;
+        },
+        [cellCount, filter, onChangeText, value],
+      );
+
+      const handleFieldKeyPress = useCallback(
+        (index: number, key: string) => {
+          if (key !== 'Backspace') {
+            return;
+          }
+          const char = index < value.length ? value[index] : '';
+          if (!char && index > 0) {
+            focusCell(index - 1);
+          }
+        },
+        [focusCell, value],
+      );
+
+      useLayoutEffect(() => {
+        if (focusAfterApply.current !== null) {
+          const i = focusAfterApply.current;
+          focusAfterApply.current = null;
+          fieldRefs.current[i]?.focus();
+        }
+      });
+
+      useEffect(() => {
+        const prevLen = prevLenRef.current;
+        const prevVal = prevValueRef.current;
+        const isFull = value.length === cellCount;
+        const becameFullByLength = isFull && prevLen < cellCount;
+        const correctedWhileFull = isFull && prevLen === cellCount && prevVal !== value;
+
+        if (becameFullByLength || correctedWhileFull) {
+          onComplete?.();
+        }
+        prevLenRef.current = value.length;
+        prevValueRef.current = value;
+      }, [cellCount, onComplete, value]);
+
+      const contextValue = useMemo(
+        () => ({
+          cellCount,
+          value,
+          isDisabled,
+          isInvalid,
+          isReadOnly,
+          smsOtpAutofill,
+          filter,
+          getCellProps,
+          cellTestIdPrefix,
+          rootAccessibilityLabel,
+          setFieldRef,
+          handleFieldChange,
+          handleFieldKeyPress,
+        }),
+        [
+          cellCount,
+          value,
+          isDisabled,
+          isInvalid,
+          isReadOnly,
+          smsOtpAutofill,
+          filter,
+          getCellProps,
+          cellTestIdPrefix,
+          rootAccessibilityLabel,
+          setFieldRef,
+          handleFieldChange,
+          handleFieldKeyPress,
+        ],
+      );
+
+      // Hermes drops outer-scope closure vars from its environment record when
+      // they are only referenced inside a nested callback (Array.from). Using a
+      // for-loop keeps OtpCell/OtpField references in the render function's own
+      // scope, avoiding the Hermes closure-capture bug.
+      const cells: React.ReactElement[] = [];
+      for (let i = 0; i < cellCount; i++) {
+        cells.push(
+          <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
+            <OtpCell>
+              <OtpField />
+            </OtpCell>
+          </OtpCellIndexProvider>,
+        );
+      }
+
+      return (
+        <BaseRoot ref={ref as React.Ref<unknown>} {...(rest as RootProps)}>
+          <OtpInputProvider value={contextValue}>{cells}</OtpInputProvider>
+        </BaseRoot>
+      );
+    },
+  );

package/src/otp-input/index.tsx

@@ -0,0 +1,34 @@
+import type React from 'react';
+import { createOtpInputCell } from './createOtpInputCell';
+import { createOtpInputField } from './createOtpInputField';
+import { createOtpInputRoot } from './createOtpInputRoot';
+import type { IOtpInputComponentType } from './types';
+
+export { applyOtpInputChange } from './utils/applyValueChange';
+export { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
+export type * from './types';
+
+export function createOtpInput<
+  RootProps,
+  CellProps,
+  FieldProps,
+  RootRef = unknown,
+  FieldRef = unknown,
+>(BaseComponents: {
+  Root: React.ComponentType<RootProps>;
+  Cell: React.ComponentType<CellProps>;
+  Field: React.ComponentType<FieldProps>;
+}) {
+  const Cell = createOtpInputCell(BaseComponents.Cell);
+  const Field = createOtpInputField(BaseComponents.Field);
+  const Root = createOtpInputRoot(BaseComponents.Root, Cell, Field);
+
+  Root.displayName = 'OtpInputPrimitive';
+  Cell.displayName = 'OtpInputPrimitive.Cell';
+  Field.displayName = 'OtpInputPrimitive.Field';
+
+  return Object.assign(Root, {
+    Cell,
+    Field,
+  }) as IOtpInputComponentType<RootProps, CellProps, FieldProps, RootRef, FieldRef>;
+}

package/src/otp-input/types.ts

@@ -0,0 +1,92 @@
+import type React from 'react';
+import type { ReactNode } from 'react';
+import type { TextInputProps, ViewProps } from 'react-native';
+
+export interface IOtpInputRootProps extends ViewProps {
+  /** Number of OTP cells (fixed). */
+  cellCount: number;
+  /** Controlled value: characters in order, length 0..`cellCount` (prefix fill). */
+  value: string;
+  onChangeText: (value: string) => void;
+  /**
+   * Called when the code is ready to verify again:
+   * - `value` becomes full (`length === cellCount`) after being shorter, or
+   * - `value` stays full but the string changes (user corrected a digit without dropping below full length).
+   * Does not fire on mount when `value` is already full and unchanged, nor on re-renders with the same full `value`.
+   */
+  onComplete?: () => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  /** When false, no SMS / Web OTP autofill hints on the first cell. @default true */
+  smsOtpAutofill?: boolean;
+  /**
+   * Override default digit-only filtering.
+   * Takes priority over `allowedCharacters` and `characterPattern` when truthy.
+   * Does not change the default `keyboardType` (`number-pad`); use `getCellProps` if the allowed
+   * character set needs a different keyboard.
+   */
+  filterInput?: (input: string) => string;
+  /**
+   * Keep only characters present in this string (treated as a set of code units).
+   * Used when `filterInput` is not provided. Takes priority over `characterPattern`.
+   * Default keyboard remains numeric; use `getCellProps` to set `keyboardType` when allowing letters/symbols.
+   */
+  allowedCharacters?: string;
+  /**
+   * Keep only characters matching this pattern (tested per code unit).
+   * Used when neither `filterInput` nor `allowedCharacters` is provided.
+   * Default keyboard remains numeric; use `getCellProps` to set `keyboardType` for non-digit input.
+   */
+  characterPattern?: RegExp;
+  /**
+   * Spread onto each cell after built-in field props (including `keyboardType="number-pad"`),
+   * so consumers can override `keyboardType`, `autoCapitalize`, etc. for non-digit OTPs.
+   */
+  getCellProps?: (index: number) => Partial<TextInputProps>;
+  /** Optional prefix for `testID` on each field: `${cellTestIdPrefix}:${index}:...` */
+  cellTestIdPrefix?: string;
+}
+
+export interface IOtpInputCellProps extends ViewProps {
+  children?: ReactNode;
+}
+
+export type IOtpInputFieldProps = TextInputProps;
+
+export interface OtpInputCellIndexContextValue {
+  cellIndex: number;
+}
+
+export interface OtpInputContextValue {
+  cellCount: number;
+  value: string;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isReadOnly: boolean;
+  smsOtpAutofill: boolean;
+  filter: (input: string) => string;
+  getCellProps?: (index: number) => Partial<TextInputProps>;
+  cellTestIdPrefix?: string;
+  rootAccessibilityLabel?: string;
+  setFieldRef: (index: number, el: import('react-native').TextInput | null) => void;
+  handleFieldChange: (index: number, text: string) => void;
+  handleFieldKeyPress: (index: number, key: string) => void;
+}
+
+export type IOtpInputComponentType<
+  RootProps,
+  CellProps,
+  FieldProps,
+  RootRef = unknown,
+  FieldRef = unknown,
+> = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<RootProps & IOtpInputRootProps> & React.RefAttributes<RootRef>
+> & {
+  Cell: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<CellProps & IOtpInputCellProps> & React.RefAttributes<unknown>
+  >;
+  Field: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<FieldProps & IOtpInputFieldProps> & React.RefAttributes<FieldRef>
+  >;
+};

package/src/otp-input/utils/applyValueChange.ts

@@ -0,0 +1,56 @@
+/**
+ * Pure OTP value transition for a controlled prefix string (no explicit empty slots).
+ * - Single-character edits use index-based replace/append (no reorder).
+ * - Multi-character input (paste/autofill) writes at `index` forward, then packs left.
+ */
+export function applyOtpInputChange(
+  value: string,
+  index: number,
+  rawText: string,
+  cellCount: number,
+  filter: (input: string) => string,
+): { nextValue: string; focusIndex: number } {
+  const text = filter(rawText);
+
+  if (text.length === 0) {
+    if (index < value.length) {
+      const next = (value.slice(0, index) + value.slice(index + 1)).slice(0, cellCount);
+      return { nextValue: next, focusIndex: Math.max(0, index - 1) };
+    }
+    return { nextValue: value, focusIndex: index };
+  }
+
+  if (text.length === 1) {
+    if (index < value.length) {
+      const next = (value.slice(0, index) + text + value.slice(index + 1)).slice(0, cellCount);
+      return { nextValue: next, focusIndex: Math.min(index + 1, cellCount - 1) };
+    }
+    if (value.length < cellCount) {
+      if (index === value.length) {
+        const next = (value + text).slice(0, cellCount);
+        return { nextValue: next, focusIndex: Math.min(next.length, cellCount - 1) };
+      }
+      const arr = Array.from({ length: cellCount }, (_, i) => (i < value.length ? value[i] : ''));
+      arr[index] = text;
+      const next = arr
+        .filter((c) => c)
+        .join('')
+        .slice(0, cellCount);
+      return { nextValue: next, focusIndex: Math.min(index + 1, cellCount - 1) };
+    }
+    const next = (value.slice(0, index) + text + value.slice(index + 1)).slice(0, cellCount);
+    return { nextValue: next, focusIndex: Math.min(index + 1, cellCount - 1) };
+  }
+
+  const arr = Array.from({ length: cellCount }, (_, i) => (i < value.length ? value[i] : ''));
+  for (let k = 0; k < text.length && index + k < cellCount; k++) {
+    arr[index + k] = text.charAt(k);
+  }
+  const next = arr
+    .filter((c) => c)
+    .join('')
+    .slice(0, cellCount);
+  const lastWritten = Math.min(index + text.length - 1, cellCount - 1);
+  const focusIndex = Math.min(Math.max(lastWritten, next.length - 1), cellCount - 1);
+  return { nextValue: next, focusIndex: Math.max(0, focusIndex) };
+}

package/src/otp-input/utils/filterValue.ts

@@ -0,0 +1,37 @@
+/** Strip to digits (default OTP behavior). */
+export function filterDigits(input: string): string {
+  return input.replace(/\D/g, '');
+}
+
+/** Keep only characters present in `allowed` (treat as a set of UTF-16 code units). */
+export function filterAllowedCharacters(allowed: string) {
+  const allowedSet = new Set<string>();
+  for (let i = 0; i < allowed.length; i++) {
+    allowedSet.add(allowed.charAt(i));
+  }
+  return (input: string) => {
+    let out = '';
+    for (let i = 0; i < input.length; i++) {
+      const ch = input.charAt(i);
+      if (allowedSet.has(ch)) {
+        out += ch;
+      }
+    }
+    return out;
+  };
+}
+
+/** Keep only characters matching `re` (tested per UTF-16 code unit). */
+export function filterByRegExp(re: RegExp) {
+  return (input: string) => {
+    let out = '';
+    for (let i = 0; i < input.length; i++) {
+      const ch = input.charAt(i);
+      re.lastIndex = 0;
+      if (re.test(ch)) {
+        out += ch;
+      }
+    }
+    return out;
+  };
+}

package/src/overlay/OverlayContainer.tsx

@@ -3,20 +3,13 @@ import {
   Modal,
   Platform,
   Pressable,
-  type StyleProp,
   StyleSheet,
+  View,
+  type StyleProp,
   type ViewStyle,
 } from 'react-native';
 import Animated, { type EntryOrExitLayoutType } from 'react-native-reanimated';
-
-let createPortalFn:
-  | ((children: React.ReactNode, container: Element) => React.ReactPortal)
-  | undefined;
-if (Platform.OS === 'web') {
-  try {
-    createPortalFn = require('react-dom').createPortal;
-  } catch {}
-}
+import { createPortalFn } from '../utils/createPortal';
 
 export interface OverlayContainerProps {
   onDismiss: () => void;
@@ -30,7 +23,11 @@ export interface OverlayContainerProps {
  * Cross-platform overlay container.
  *
  * - Web: renders children into a `createPortal` at `document.body` with
- *   `position: fixed` and `zIndex: 50`.
+ *   `position: fixed` and `zIndex: 50`. Uses a plain `View` rather than
+ *   Reanimated's `Animated.View` because Reanimated's layout animations
+ *   (`entering`/`exiting`) rely on `require()` calls that break silently
+ *   in Vite production bundles, leaving elements stuck at opacity 0.
+ *   See: https://github.com/software-mansion/react-native-reanimated/issues/6775
  * - Native: renders children inside a transparent `<Modal>` with a
  *   backdrop `<Pressable>` that calls `onDismiss` on press.
  *
@@ -46,13 +43,7 @@ export function OverlayContainer({
 }: Readonly<OverlayContainerProps>) {
   if (Platform.OS === 'web' && createPortalFn) {
     return createPortalFn(
-      <Animated.View
-        entering={entering}
-        exiting={exiting}
-        style={[{ position: 'fixed' as any, zIndex: 50 }, style]}
-      >
-        {children}
-      </Animated.View>,
+      <View style={[{ position: 'fixed' as any, zIndex: 50 }, style]}>{children}</View>,
       document.body,
     );
   }

package/src/overlay/index.ts

@@ -2,6 +2,7 @@ export { OverlayContainer } from './OverlayContainer';
 export type { OverlayContainerProps } from './OverlayContainer';
 export { useAnchorPosition, type AnchorLayout } from './useAnchorPosition';
 export { useDismissOverlay } from './useDismissOverlay';
+export { useEscapeKey } from './useEscapeKey';
 export {
   useOverlayPosition,
   type OverlayPosition,

package/src/overlay/useEscapeKey.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * No-op on native — Escape key dismissal is not applicable.
+ * Native uses the system back gesture / hardware button via Modal.
+ */
+export function useEscapeKey(_open: boolean, _onEscape: () => void) {}

package/src/overlay/useEscapeKey.web.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Closes an overlay when the user presses the Escape key.
+ * Web-only — native platforms use Modal's `onRequestClose` for back/dismiss.
+ */
+export function useEscapeKey(open: boolean, onEscape: () => void) {
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onEscapeRef.current();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+}

package/src/progress/context.tsx

@@ -0,0 +1,13 @@
+import { createContext } from '@cdx-ui/utils';
+import type { ProgressDataState } from './types';
+
+export interface ProgressContextValue {
+  /** Clamped value in [0, max], or null when indeterminate */
+  readonly value: number | null;
+  readonly max: number;
+  readonly percent: number;
+  readonly state: ProgressDataState;
+}
+
+export const [ProgressProvider, useProgressContext] =
+  createContext<ProgressContextValue>('ProgressContext');

package/src/progress/createProgressIndicator.tsx

@@ -0,0 +1,35 @@
+import type React from 'react';
+import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
+import type { ViewStyle } from 'react-native';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useProgressContext } from './context';
+
+type PercentString = `${number}%`;
+
+export const createProgressIndicator = <T, R = unknown>(BaseIndicator: React.ComponentType<T>) =>
+  forwardRef<R, PropsWithoutRef<T>>((props, ref) => {
+    const { style, ...rest } = props as PropsWithoutRef<T> & { style?: object };
+    const { percent, state, max, value } = useProgressContext();
+
+    const filledStyle = useMemo((): ViewStyle => {
+      const pct = `${String(percent)}%` as PercentString;
+      return { width: pct, height: '100%' };
+    }, [percent]);
+
+    const dataAttrs = dataAttributes({
+      state,
+      value: value === null ? undefined : String(value),
+      max: String(max),
+    });
+
+    return (
+      <BaseIndicator
+        ref={ref as React.Ref<R>}
+        {...({
+          ...rest,
+          ...dataAttrs,
+          style: [filledStyle, style],
+        } as T)}
+      />
+    );
+  });

package/src/progress/createProgressRoot.tsx

@@ -0,0 +1,109 @@
+import type React from 'react';
+import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { ProgressProvider } from './context';
+import type { InterfaceProgressProps, ProgressDataState } from './types';
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n));
+}
+
+function resolveState(
+  value: number | null,
+  max: number,
+  clamped: number | null,
+): ProgressDataState {
+  if (value === null) {
+    return 'indeterminate';
+  }
+  if (max <= 0) {
+    return 'complete';
+  }
+  if (clamped !== null && clamped >= max) {
+    return 'complete';
+  }
+  return 'loading';
+}
+
+function defaultGetValueLabel(value: number, max: number): string {
+  if (max <= 0) {
+    return '0%';
+  }
+  return `${String(Math.round((value / max) * 100))}%`;
+}
+
+export const createProgressRoot = <T, R = unknown>(BaseRoot: React.ComponentType<T>) =>
+  forwardRef<R, PropsWithoutRef<T> & InterfaceProgressProps>((props, ref) => {
+    const {
+      value: valueProp = 0,
+      max: maxProp = 100,
+      getValueLabel = defaultGetValueLabel,
+      children,
+      accessibilityRole = 'progressbar',
+      accessibilityValue: accessibilityValueProp,
+      role = 'progressbar',
+      ...restProps
+    } = props;
+    const max = maxProp > 0 ? maxProp : 0;
+    const isIndeterminate = valueProp === null;
+    const clampedValue =
+      valueProp === null ? null : clamp(Number.isFinite(valueProp) ? valueProp : 0, 0, max);
+
+    const percent = useMemo(() => {
+      if (clampedValue === null || max <= 0) {
+        return 0;
+      }
+      return (clampedValue / max) * 100;
+    }, [clampedValue, max]);
+
+    const state = useMemo(
+      () => resolveState(valueProp, max, clampedValue),
+      [valueProp, max, clampedValue],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        value: clampedValue,
+        max,
+        percent,
+        state,
+      }),
+      [clampedValue, max, percent, state],
+    );
+
+    const dataAttrs = dataAttributes({
+      state,
+      value: clampedValue === null ? undefined : String(clampedValue),
+      max: String(max),
+    });
+
+    const accessibilityValue = useMemo(() => {
+      if (accessibilityValueProp !== undefined) {
+        return accessibilityValueProp;
+      }
+      if (isIndeterminate || clampedValue === null) {
+        return { min: 0, max, text: 'Indeterminate' };
+      }
+      return {
+        min: 0,
+        max,
+        now: clampedValue,
+        text: getValueLabel(clampedValue, max),
+      };
+    }, [accessibilityValueProp, isIndeterminate, clampedValue, max, getValueLabel]);
+
+    return (
+      <ProgressProvider value={contextValue}>
+        <BaseRoot
+          ref={ref as React.Ref<R>}
+          {...(restProps as T)}
+          role={role}
+          accessibilityRole={accessibilityRole}
+          accessibilityValue={accessibilityValue}
+          {...dataAttrs}
+        >
+          {children}
+        </BaseRoot>
+      </ProgressProvider>
+    );
+  });

package/src/progress/index.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import { createProgressIndicator } from './createProgressIndicator';
+import { createProgressRoot } from './createProgressRoot';
+import type { IProgressComponentType } from './types';
+
+export type { IProgressProps, IProgressComponentType, ProgressDataState } from './types';
+export type { ProgressContextValue } from './context';
+export { useProgressContext } from './context';
+
+export function createProgress<
+  RootProps,
+  IndicatorProps,
+  RootRef = unknown,
+  IndicatorRef = unknown,
+>(components: {
+  Root: React.ComponentType<RootProps>;
+  Indicator: React.ComponentType<IndicatorProps>;
+}) {
+  const Progress = createProgressRoot<RootProps, RootRef>(components.Root);
+  const Indicator = createProgressIndicator<IndicatorProps, IndicatorRef>(components.Indicator);
+
+  Progress.displayName = 'ProgressPrimitive';
+  Indicator.displayName = 'ProgressPrimitive.Indicator';
+
+  return Object.assign(Progress, {
+    Indicator,
+  }) as IProgressComponentType<RootProps, IndicatorProps, RootRef, IndicatorRef>;
+}