react-native-system-ui 0.0.7 → 1.0.0

package/dist/es/utils/createPlatformShadow.js

@@ -1,50 +1,39 @@
 import { Platform } from 'react-native';
-const hexToRgba = (hex, alpha) => {
-  const normalized = hex.replace('#', '');
-  const expand = normalized.length === 3 ? normalized.split('').map(char => char + char).join('') : normalized;
-  if (expand.length < 6) {
-    return hex;
-  }
-  const bigint = parseInt(expand.slice(0, 6), 16);
-  const r = bigint >> 16 & 255;
-  const g = bigint >> 8 & 255;
-  const b = bigint & 255;
-  const clampedAlpha = Math.max(0, Math.min(1, alpha));
-  return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
-};
-const ensureRgbaColor = (color, alpha) => {
-  const trimmed = color.trim().toLowerCase();
-  if (trimmed.startsWith('#')) {
-    return hexToRgba(trimmed, alpha);
-  }
-  if (trimmed.startsWith('rgba')) {
-    return color;
-  }
-  if (trimmed.startsWith('rgb(')) {
-    return color.replace(/rgb\(([^)]*)\)/i, (_, inner) => `rgba(${inner}, ${alpha})`);
+const toRgba = (color, alpha) => {
+  const t = color.trim();
+  if (t.startsWith('#')) {
+    const h = t.replace('#', '');
+    const e = h.length === 3 ? h.split('').map(c => c + c).join('') : h;
+    if (e.length < 6) return color;
+    const n = parseInt(e.slice(0, 6), 16);
+    return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${Math.max(0, Math.min(1, alpha))})`;
   }
+  if (t.startsWith('rgba')) return color;
+  if (t.startsWith('rgb(')) return color.replace(/rgb\(([^)]*)\)/i, (_, i) => `rgba(${i}, ${alpha})`);
   return color;
 };
-export const createPlatformShadow = config => {
-  const nativeShadow = {
-    shadowColor: config.color,
-    shadowOpacity: config.opacity,
-    shadowRadius: config.radius,
+export const createPlatformShadow = ({
+  color,
+  opacity,
+  radius,
+  offsetY,
+  offsetX = 0,
+  elevation
+}) => {
+  if (Platform.OS !== 'web') return {
+    shadowColor: color,
+    shadowOpacity: opacity,
+    shadowRadius: radius,
     shadowOffset: {
-      width: config.offsetX ?? 0,
-      height: config.offsetY
+      width: offsetX,
+      height: offsetY
     },
-    ...(config.elevation !== undefined ? {
-      elevation: config.elevation
-    } : null)
+    ...(elevation !== undefined && {
+      elevation
+    })
   };
-  if (Platform.OS !== 'web') {
-    return nativeShadow;
-  }
-  const blur = Math.max(config.radius * 1.5, config.radius);
-  const boxShadowColor = ensureRgbaColor(config.color, config.opacity);
   return {
-    boxShadow: `${config.offsetX ?? 0}px ${config.offsetY}px ${blur}px ${boxShadowColor}`
+    boxShadow: `${offsetX}px ${offsetY}px ${radius * 1.5}px ${toRgba(color, opacity)}`
   };
 };
 export default createPlatformShadow;

package/dist/es/utils/date.js

@@ -1,63 +1,33 @@
 export const padZero = (value, length = 2) => {
-  const str = String(value);
-  return str.length >= length ? str : `${'0'.repeat(length - str.length)}${str}`;
-};
-export const times = (count, iteratee) => {
-  return Array.from({
-    length: count
-  }, (_, index) => iteratee(index));
+  const s = String(value);
+  return s.length >= length ? s : `${'0'.repeat(length - s.length)}${s}`;
 };
+export const times = (count, fn) => Array.from({
+  length: count
+}, (_, i) => fn(i));
 export const getTrueValue = value => {
   if (!value) return 0;
-  const parsed = parseInt(value, 10);
-  return Number.isNaN(parsed) ? 0 : parsed;
-};
-export const getMonthEndDay = (year, month) => {
-  return 32 - new Date(year, month - 1, 32).getDate();
+  const n = parseInt(value, 10);
+  return Number.isNaN(n) ? 0 : n;
 };
-export const isValidDate = value => {
-  return value instanceof Date && !Number.isNaN(value.getTime());
-};
-export const formatDuration = (format, currentTime) => {
-  const {
-    days
-  } = currentTime;
+export const getMonthEndDay = (year, month) => 32 - new Date(year, month - 1, 32).getDate();
+export const isValidDate = value => value instanceof Date && !Number.isNaN(value.getTime());
+export const formatDuration = (format, time) => {
   let {
+    days,
     hours,
     minutes,
     seconds,
     milliseconds
-  } = currentTime;
-  let template = format;
-  if (template.includes('DD')) {
-    template = template.replace('DD', padZero(days));
-  } else {
-    hours += days * 24;
-  }
-  if (template.includes('HH')) {
-    template = template.replace('HH', padZero(hours));
-  } else {
-    minutes += hours * 60;
-  }
-  if (template.includes('mm')) {
-    template = template.replace('mm', padZero(minutes));
-  } else {
-    seconds += minutes * 60;
-  }
-  if (template.includes('ss')) {
-    template = template.replace('ss', padZero(seconds));
-  } else {
-    milliseconds += seconds * 1000;
-  }
-  if (template.includes('S')) {
+  } = time;
+  let t = format;
+  if (t.includes('DD')) t = t.replace('DD', padZero(days));else hours += days * 24;
+  if (t.includes('HH')) t = t.replace('HH', padZero(hours));else minutes += hours * 60;
+  if (t.includes('mm')) t = t.replace('mm', padZero(minutes));else seconds += minutes * 60;
+  if (t.includes('ss')) t = t.replace('ss', padZero(seconds));else milliseconds += seconds * 1000;
+  if (t.includes('S')) {
     const ms = padZero(milliseconds, 3);
-    if (template.includes('SSS')) {
-      template = template.replace('SSS', ms);
-    } else if (template.includes('SS')) {
-      template = template.replace('SS', ms.slice(0, 2));
-    } else {
-      template = template.replace('S', ms.charAt(0));
-    }
+    if (t.includes('SSS')) t = t.replace('SSS', ms);else if (t.includes('SS')) t = t.replace('SS', ms.slice(0, 2));else t = t.replace('S', ms.charAt(0));
   }
-  return template;
+  return t;
 };

package/dist/es/utils/deepMerge.js

@@ -1,31 +1,21 @@
-const isPlainObject = value => {
-  return Object.prototype.toString.call(value) === '[object Object]';
-};
+const isPlainObject = v => Object.prototype.toString.call(v) === '[object Object]';
 export function deepMerge(target, source) {
-  if (!source) {
-    return target;
-  }
-  if (!Array.isArray(target) && !isPlainObject(target)) {
-    return source;
-  }
-  const output = Array.isArray(target) ? [...target] : {
+  if (!source) return target;
+  if (!Array.isArray(target) && !isPlainObject(target)) return source;
+  const out = Array.isArray(target) ? [...target] : {
     ...target
   };
-  Object.keys(source).forEach(key => {
-    const sourceValue = source[key];
-    if (sourceValue === undefined) {
-      return;
+  for (const key of Object.keys(source)) {
+    const sv = source[key];
+    if (sv === undefined) continue;
+    const tv = target[key];
+    if (isPlainObject(tv) && isPlainObject(sv)) {
+      out[key] = deepMerge(tv, sv);
+      continue;
     }
-    const targetValue = target[key];
-    if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
-      ;
-      output[key] = deepMerge(targetValue, sourceValue);
-      return;
-    }
-    ;
-    output[key] = Array.isArray(sourceValue) ? [...sourceValue] : isPlainObject(sourceValue) ? {
-      ...sourceValue
-    } : sourceValue;
-  });
-  return output;
+    out[key] = Array.isArray(sv) ? [...sv] : isPlainObject(sv) ? {
+      ...sv
+    } : sv;
+  }
+  return out;
 }

package/dist/es/utils/hairline.js

@@ -1,36 +1,26 @@
 import { Platform, StyleSheet } from 'react-native';
-export const getHairlineWidth = () => Platform.OS === 'web' ? 1 : StyleSheet.hairlineWidth;
-export const createHairlineBorder = ({
-  color,
-  position = 'all',
-  enabled = true
-} = {}) => {
-  if (!enabled) return {};
-  const width = getHairlineWidth();
-  const key = position === 'all' ? 'border' : `border${position[0].toUpperCase()}${position.slice(1)}`;
-  return {
-    [`${key}Width`]: width,
-    ...(color && {
-      [`${key}Color`]: color
-    })
-  };
+const isWeb = Platform.OS === 'web';
+export const getHairlineWidth = () => StyleSheet.hairlineWidth;
+const ORIGINS = {
+  top: 'center top',
+  bottom: 'center bottom',
+  left: 'left center',
+  right: 'right center'
+};
+const SCALES = {
+  top: {
+    scaleY: 0.5
+  },
+  bottom: {
+    scaleY: 0.5
+  },
+  left: {
+    scaleX: 0.5
+  },
+  right: {
+    scaleX: 0.5
+  }
 };
-export const createHairlineBorderTop = color => createHairlineBorder({
-  color,
-  position: 'top'
-});
-export const createHairlineBorderRight = color => createHairlineBorder({
-  color,
-  position: 'right'
-});
-export const createHairlineBorderBottom = color => createHairlineBorder({
-  color,
-  position: 'bottom'
-});
-export const createHairlineBorderLeft = color => createHairlineBorder({
-  color,
-  position: 'left'
-});
 export const createHairlineView = ({
   left,
   right,
@@ -38,11 +28,50 @@ export const createHairlineView = ({
   bottom,
   width,
   color,
-  position = 'bottom'
+  position = 'bottom',
+  enabled = true,
+  borderRadius
 } = {}) => {
-  const isWeb = Platform.OS === 'web';
-  const borderWidth = width ?? (isWeb ? 1 : StyleSheet.hairlineWidth);
-  const style = {
+  if (!enabled) return {};
+  if (position === 'all') {
+    const bw = width ?? (isWeb ? 1 : StyleSheet.hairlineWidth);
+    if (isWeb && bw > 0 && bw <= 1) return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '200%',
+      height: '200%',
+      borderWidth: 1,
+      ...(color && {
+        borderColor: color
+      }),
+      ...(borderRadius != null && {
+        borderRadius: borderRadius * 2
+      }),
+      transform: [{
+        scale: 0.5
+      }],
+      transformOrigin: 'left top',
+      pointerEvents: 'none'
+    };
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderWidth: bw,
+      ...(color && {
+        borderColor: color
+      }),
+      ...(borderRadius != null && {
+        borderRadius
+      }),
+      pointerEvents: 'none'
+    };
+  }
+  const bw = width ?? (isWeb ? 1 : StyleSheet.hairlineWidth);
+  const s = {
     position: 'absolute',
     pointerEvents: 'none',
     left,
@@ -50,35 +79,14 @@ export const createHairlineView = ({
     top,
     bottom
   };
-  if (position !== 'all') {
-    const s = style;
-    if (s[position] === undefined) s[position] = 0;
-  }
-  const key = position === 'all' ? 'border' : `border${position[0].toUpperCase()}${position.slice(1)}`;
-  const mutableStyle = style;
-  mutableStyle[`${key}Width`] = borderWidth;
-  if (color) mutableStyle[`${key}Color`] = color;
-  if (isWeb && (!width || width === 1 || width === StyleSheet.hairlineWidth)) {
-    const scales = {
-      top: {
-        scaleY: 0.5
-      },
-      bottom: {
-        scaleY: 0.5
-      },
-      left: {
-        scaleX: 0.5
-      },
-      right: {
-        scaleX: 0.5
-      },
-      all: {
-        scale: 0.5
-      }
-    };
-    if (scales[position]) {
-      style.transform = [scales[position]];
-    }
+  if (s[position] === undefined) s[position] = 0;
+  const k = `border${position[0].toUpperCase()}${position.slice(1)}`;
+  s[`${k}Width`] = bw;
+  if (color) s[`${k}Color`] = color;
+  if (isWeb && bw > 0 && bw <= 1) {
+    s[`${k}Width`] = 1;
+    s.transform = [SCALES[position]];
+    s.transformOrigin = ORIGINS[position];
   }
-  return style;
+  return s;
 };

package/dist/es/utils/index.js

@@ -8,5 +8,7 @@ export * from './hairline';
 export * from './number';
 export * from './promise';
 export * from './string';
+export * from './render';
 export * from './validate';
+export * from './rtl';
 export {};

package/dist/es/utils/number.js

@@ -4,53 +4,45 @@ export const clamp01 = value => clamp(value, 0, 1);
 export const parseNumberLike = (value, fallback) => {
   if (isFiniteNumber(value)) return value;
   if (isString(value)) {
-    const parsed = Number.parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : fallback;
+    const n = Number.parseFloat(value);
+    return Number.isFinite(n) ? n : fallback;
   }
   return fallback;
 };
 export const parseNumber = (value, fallback = 0) => parseNumberLike(value, fallback) ?? fallback;
-export const parsePercentage = percentage => {
-  if (isNumber(percentage)) return percentage;
-  if (isString(percentage)) {
-    const normalized = percentage.trim().replace('%', '');
-    const parsed = Number(normalized);
-    return Number.isNaN(parsed) ? 0 : parsed;
+export const parsePercentage = value => {
+  if (isNumber(value)) return value;
+  if (isString(value)) {
+    const n = Number(value.trim().replace('%', ''));
+    return Number.isNaN(n) ? 0 : n;
   }
   return 0;
 };
 export const isNumericLike = value => isNumber(value) || isString(value) && value.trim() !== '' && !Number.isNaN(Number(value));
-export const addNumber = (num1, num2) => {
-  const cardinal = 10 ** 10;
-  return Math.round((num1 + num2) * cardinal) / cardinal;
+export const addNumber = (a, b) => {
+  const c = 10 ** 10;
+  return Math.round((a + b) * c) / c;
 };
 export const formatNumber = (value, integer, decimalLength) => {
-  let next = value;
-  if (integer) next = Math.trunc(next);
+  let n = integer ? Math.trunc(value) : value;
   if (decimalLength !== undefined) {
-    const factor = 10 ** decimalLength;
-    next = Math.round(next * factor) / factor;
+    const f = 10 ** decimalLength;
+    n = Math.round(n * f) / f;
   }
-  return next;
+  return n;
 };
 export const numberToString = (value, decimalLength) => {
   if (value === null || value === undefined || !Number.isFinite(value)) return '';
-  if (decimalLength !== undefined) return value.toFixed(decimalLength);
-  return String(value);
+  return decimalLength !== undefined ? value.toFixed(decimalLength) : String(value);
 };
 export const parseDecimalLength = value => {
   if (value === undefined) return undefined;
-  const parsed = isNumber(value) ? value : Number.parseInt(value, 10);
-  if (!Number.isFinite(parsed)) return undefined;
-  return Math.max(0, Math.floor(parsed));
+  const n = isNumber(value) ? value : Number.parseInt(value, 10);
+  return Number.isFinite(n) ? Math.max(0, Math.floor(n)) : undefined;
 };
 export const clampValue = (value, min, max) => {
-  let next = value;
-  if (isFiniteNumber(min)) {
-    next = Math.max(next, min);
-  }
-  if (isFiniteNumber(max)) {
-    next = Math.min(next, max);
-  }
-  return next;
+  let n = value;
+  if (isFiniteNumber(min)) n = Math.max(n, min);
+  if (isFiniteNumber(max)) n = Math.min(n, max);
+  return n;
 };

package/dist/es/utils/render.js

@@ -0,0 +1,7 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Text } from 'react-native';
+import { isText } from './validate';
+export const renderTextOrNode = (content, textStyle, textProps) => isText(content) ? /*#__PURE__*/React.createElement(Text, _extends({
+  style: textStyle
+}, textProps), content) : content;

package/dist/es/utils/rtl.js

@@ -0,0 +1,17 @@
+const swaps = [['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius'], ['left', 'right']];
+export const flipStyle = (style, dir) => {
+  if (dir !== 'rtl') return style;
+  const out = {
+    ...style
+  };
+  for (const [a, b] of swaps) {
+    if (a in out || b in out) {
+      const t = out[a];
+      out[a] = out[b];
+      out[b] = t;
+    }
+  }
+  if (out.flexDirection === 'row') out.flexDirection = 'row-reverse';else if (out.flexDirection === 'row-reverse') out.flexDirection = 'row';
+  return out;
+};
+export const rtlRow = dir => dir === 'rtl' ? 'row-reverse' : 'row';

package/dist/es/utils/string.js

@@ -1,30 +1,13 @@
 import { isTwoCNChar } from './validate';
-export const ensureSpace = (value, autoInsertSpace) => {
-  if (!autoInsertSpace) {
-    return value;
-  }
-  return isTwoCNChar(value) ? value.split('').join(' ') : value;
-};
+export const ensureSpace = (value, autoInsertSpace) => autoInsertSpace && isTwoCNChar(value) ? value.split('').join(' ') : value;
 export const trimExtraChar = (value, char, regExp) => {
-  const index = value.indexOf(char);
-  if (index === -1) return value;
-  if (char === '-' && index !== 0) {
-    return value.slice(0, index);
-  }
-  return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+  const i = value.indexOf(char);
+  if (i === -1) return value;
+  if (char === '-' && i !== 0) return value.slice(0, i);
+  return value.slice(0, i + 1) + value.slice(i).replace(regExp, '');
 };
 export const formatNumberInput = (value, allowDot = true, allowMinus = true) => {
-  let next = value;
-  if (allowDot) {
-    next = trimExtraChar(next, '.', /\./g);
-  } else {
-    next = next.split('.')[0];
-  }
-  if (allowMinus) {
-    next = trimExtraChar(next, '-', /-/g);
-  } else {
-    next = next.replace(/-/g, '');
-  }
-  const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
-  return next.replace(regExp, '');
+  let n = allowDot ? trimExtraChar(value, '.', /\./g) : value.split('.')[0];
+  n = allowMinus ? trimExtraChar(n, '-', /-/g) : n.replace(/-/g, '');
+  return n.replace(allowDot ? /[^-0-9.]/g : /[^-0-9]/g, '');
 };

package/dist/types/components/action-sheet/ActionSheet.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { ActionSheetProps } from './types';
-declare const ActionSheet: React.FC<ActionSheetProps>;
+declare const ActionSheet: React.NamedExoticComponent<ActionSheetProps>;
 export default ActionSheet;

package/dist/types/components/area/Area.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { AreaProps } from './types';
-declare const Area: React.FC<AreaProps>;
+declare const Area: React.NamedExoticComponent<AreaProps>;
 export default Area;

package/dist/types/components/area/tokens.d.ts

@@ -1,3 +1,7 @@
 export interface AreaTokens {
+    defaults: {
+        columnsNum: 1 | 2 | 3;
+        interactionMode: 'freeze' | 'sync';
+    };
 }
 export declare const useAreaTokens: (overrides?: import("../..").DeepPartial<AreaTokens> | undefined) => AreaTokens;

package/dist/types/components/avatar/Avatar.d.ts

@@ -3,5 +3,5 @@ import { Text, View } from 'react-native';
 import type { AvatarFallbackTextProps, AvatarImageProps, AvatarProps } from './types';
 export declare const AvatarFallbackText: React.ForwardRefExoticComponent<AvatarFallbackTextProps & React.RefAttributes<Text>>;
 export declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<import("react-native").Image>>;
-export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<View>>;
+export declare const Avatar: React.NamedExoticComponent<AvatarProps & React.RefAttributes<View>>;
 export default Avatar;

package/dist/types/components/avatar/index.d.ts

@@ -1,3 +1,2 @@
-export { Avatar as default } from './Avatar';
-export { Avatar } from './Avatar';
+export { Avatar, Avatar as default } from './Avatar';
 export type { AvatarProps, AvatarShape, AvatarSize } from './types';

package/dist/types/components/badge/Badge.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { BadgeProps } from './types';
-export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
+export declare const Badge: React.NamedExoticComponent<BadgeProps & React.RefAttributes<View>>;

package/dist/types/components/button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { ButtonProps } from './types';
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<View>>;
+export declare const Button: React.NamedExoticComponent<ButtonProps & React.RefAttributes<View>>;
 export default Button;

package/dist/types/components/button/index.d.ts

@@ -1,4 +1,4 @@
-declare const Button: import("react").ForwardRefExoticComponent<import("./types").ButtonProps & import("react").RefAttributes<import("react-native").View>> & {
+declare const Button: import("react").NamedExoticComponent<import("./types").ButtonProps & import("react").RefAttributes<import("react-native").View>> & {
     Group: import("react").NamedExoticComponent<import("./ButtonGroup").ButtonGroupProps>;
 };
 export default Button;

package/dist/types/components/calendar/Calendar.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { CalendarProps } from './types';
-declare const Calendar: React.FC<CalendarProps>;
+declare const Calendar: React.NamedExoticComponent<CalendarProps>;
 export default Calendar;

package/dist/types/components/cascader/Cascader.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CascaderProps } from "./types";
-declare const Cascader: React.FC<CascaderProps>;
+declare const Cascader: React.NamedExoticComponent<CascaderProps>;
 export default Cascader;

package/dist/types/components/cell/Cell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { CellProps } from './types';
-export declare const Cell: React.ForwardRefExoticComponent<CellProps & React.RefAttributes<View>>;
+export declare const Cell: React.NamedExoticComponent<CellProps & React.RefAttributes<View>>;

package/dist/types/components/cell/CellGroup.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { CellGroupProps } from './types';
-export declare const CellGroup: React.FC<CellGroupProps>;
+export declare const CellGroup: React.NamedExoticComponent<CellGroupProps>;

package/dist/types/components/cell/index.d.ts

@@ -1,6 +1,6 @@
 import { CellGroup } from './CellGroup';
-declare const Cell: import("react").ForwardRefExoticComponent<import("./types").CellProps & import("react").RefAttributes<import("react-native").View>> & {
-    Group: import("react").FC<import("./types").CellGroupProps>;
+declare const Cell: import("react").NamedExoticComponent<import("./types").CellProps & import("react").RefAttributes<import("react-native").View>> & {
+    Group: import("react").NamedExoticComponent<import("./types").CellGroupProps>;
 };
 export default Cell;
 export { Cell };

package/dist/types/components/checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { CheckboxProps } from './types';
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<View>>;
+export declare const Checkbox: React.NamedExoticComponent<CheckboxProps & React.RefAttributes<View>>;
 export default Checkbox;

package/dist/types/components/circle/Circle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { CircleProps } from './types';
-export declare const Circle: React.FC<CircleProps>;
+export declare const Circle: React.NamedExoticComponent<CircleProps>;
 export type { CircleLineCap, CircleProps, CircleStartPosition, CircleTokens } from './types';
 export default Circle;

package/dist/types/components/collapse/Collapse.d.ts

@@ -36,9 +36,8 @@ export interface CollapsePanelProps extends ViewProps {
 export type CollapsePanelInstance = {
     toggle: (expand?: boolean) => void;
 };
-type CollapseComponent = React.FC<CollapseProps> & {
+export declare const Collapse: React.NamedExoticComponent<CollapseProps> & {
     Panel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<CollapsePanelInstance>>;
     Item: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<CollapsePanelInstance>>;
 };
-export declare const Collapse: CollapseComponent;
 export default Collapse;