react-native-system-ui 1.0.0 → 1.0.1

package/dist/es/components/typography/Typography.js

@@ -19,11 +19,11 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     tokensOverride,
     children,
-    type: typeProp,
-    color: colorProp,
-    size: sizeProp,
+    type: typeP,
+    color: colorP,
+    size: sizeP,
     level,
-    disabled: disabledProp,
+    disabled: disP,
     delete: deleted,
     underline,
     center,
@@ -34,9 +34,9 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...textProps
   } = props;
   const tokens = useTypographyTokens(tokensOverride);
-  const type = typeProp ?? tokens.defaults.type;
-  const size = sizeProp ?? tokens.defaults.size;
-  const disabled = disabledProp ?? tokens.defaults.disabled;
+  const type = typeP ?? tokens.defaults.type;
+  const size = sizeP ?? tokens.defaults.size;
+  const disabled = disP ?? tokens.defaults.disabled;
   const ellipsisRows = resolveEllipsisRows(ellipsis);
   const ellipsisConfig = isEllipsisObject(ellipsis) ? ellipsis : undefined;
   const [isTruncated, setIsTruncated] = useState(false);
@@ -48,13 +48,14 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
     setIsTruncated(prev => prev === exceeded ? prev : exceeded);
   }, [ellipsisRows, expanded]);
   let resolvedColor = tokens.colors[type] ?? tokens.colors.default;
-  if (colorProp !== undefined && colorProp !== null) {
-    const colorKey = String(colorProp);
-    resolvedColor = hasTypographyColorKey(tokens.colors, colorKey) ? tokens.colors[colorKey] : colorKey;
+  if (colorP !== undefined && colorP !== null) {
+    const ck = String(colorP);
+    resolvedColor = hasTypographyColorKey(tokens.colors, ck) ? tokens.colors[ck] : ck;
   }
+  ;
   const fontSize = level ? tokens.sizing.titles[level].fontSize : tokens.sizing.sizes[size];
   const lineHeight = level ? tokens.sizing.titles[level].lineHeight : fontSize * tokens.sizing.lineHeightMultiplier;
-  const textDecorationLine = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
+  const textDeco = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
   const baseStyle = [{
     color: resolvedColor,
     fontSize,
@@ -62,12 +63,12 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
     fontFamily: tokens.typography.fontFamily,
     fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
     includeFontPadding: false,
-    textDecorationLine,
+    textDecorationLine: textDeco,
     textAlign: center ? 'center' : undefined,
     opacity: disabled ? tokens.opacity.disabled : 1
   }, style];
-  const hasActionText = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
-  const shouldShowAction = hasActionText && (isTruncated || expanded || isWeb);
+  const hasActTxt = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
+  const showAct = hasActTxt && (isTruncated || expanded || isWeb);
   const handleToggleEllipsis = useCallback(() => {
     if (!ellipsisConfig) return;
     setExpanded(prev => {
@@ -76,24 +77,24 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
       return next;
     });
   }, [ellipsisConfig]);
-  const actionLabel = !ellipsisConfig ? undefined : expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
-  const actionTextStyle = {
+  const actLabel = !ellipsisConfig ? undefined : expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
+  const actTxtStyle = {
     color: tokens.colors.primary,
     fontSize: tokens.sizing.sizes.sm,
     fontWeight: tokens.typography.weight.medium,
     marginLeft: tokens.sizing.actionMarginLeft,
     includeFontPadding: false
   };
-  const textStyle = shouldShowAction ? [baseStyle, FLEX_SHRINK_STYLE] : baseStyle;
+  const textStyle = showAct ? [baseStyle, FLEX_SHRINK_STYLE] : baseStyle;
   const textNode = /*#__PURE__*/React.createElement(Text, _extends({
     ref: ref,
     style: textStyle,
     onPress: onPress,
     numberOfLines: !expanded ? ellipsisRows : undefined,
     ellipsizeMode: "tail",
-    onTextLayout: hasActionText && ellipsisRows && !expanded && !isWeb ? handleTextLayout : undefined
+    onTextLayout: hasActTxt && ellipsisRows && !expanded && !isWeb ? handleTextLayout : undefined
   }, textProps), children);
-  if (!shouldShowAction) return center ? /*#__PURE__*/React.createElement(View, {
+  if (!showAct) return center ? /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.centerWrapper
   }, textNode) : textNode;
   const actionNode = /*#__PURE__*/React.createElement(View, {
@@ -101,8 +102,8 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, textNode, /*#__PURE__*/React.createElement(Text, {
     onPress: handleToggleEllipsis,
     suppressHighlighting: true,
-    style: actionTextStyle
-  }, actionLabel));
+    style: actTxtStyle
+  }, actLabel));
   return center ? /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.centerWrapper
   }, actionNode) : actionNode;
@@ -137,6 +138,7 @@ const TypographyLink = /*#__PURE__*/React.forwardRef((props, ref) => {
       onPress(event);
       return;
     }
+    ;
     if (href) {
       try {
         await Linking.openURL(href);

package/dist/es/components/water-mark/WaterMark.js

@@ -8,7 +8,7 @@ const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteN
 const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
 const WaterMarkImpl = props => {
   const {
-    content: contentProp,
+    content: contentP,
     width,
     height,
     gapX,
@@ -19,8 +19,8 @@ const WaterMarkImpl = props => {
     fontSize,
     color,
     opacity,
-    zIndex: zIndexProp,
-    fullPage: fullPageProp,
+    zIndex: zIdxP,
+    fullPage: fullP,
     tokensOverride,
     style,
     onLayoutCalculated,
@@ -28,9 +28,9 @@ const WaterMarkImpl = props => {
     ...rest
   } = props;
   const tokens = useWaterMarkTokens(tokensOverride);
-  const content = contentProp ?? tokens.defaults.content;
-  const zIndex = resolveFiniteNumber(zIndexProp, tokens.defaults.zIndex);
-  const fullPage = fullPageProp ?? tokens.defaults.fullPage;
+  const content = contentP ?? tokens.defaults.content;
+  const zIndex = resolveFiniteNumber(zIdxP, tokens.defaults.zIndex);
+  const fullPage = fullP ?? tokens.defaults.fullPage;
   const window = useWindowDimensions();
   const [layoutSize, setLayoutSize] = useState({
     width: 0,
@@ -41,99 +41,99 @@ const WaterMarkImpl = props => {
     height: 0
   });
   const size = fullPage ? window : layoutSize;
-  const resolvedGapX = resolveNonNegativeNumber(gapX, tokens.defaults.gapX);
-  const resolvedGapY = resolveNonNegativeNumber(gapY, tokens.defaults.gapY);
-  const resolvedRotate = resolveFiniteNumber(rotate, tokens.defaults.rotate);
-  const resolvedOpacity = Math.max(0, Math.min(1, resolveFiniteNumber(opacity, tokens.defaults.opacity)));
-  const fontSizeFromFont = isFiniteNumber(font?.size) ? font.size : isString(font?.size) ? Number.parseFloat(font.size) : undefined;
-  const normalizedFontSize = Math.max(0, resolveFiniteNumber((Number.isFinite(fontSizeFromFont ?? Number.NaN) ? fontSizeFromFont : undefined) ?? fontSize, tokens.defaults.fontSize));
-  const resolvedColor = font?.color ?? color ?? tokens.colors.mark;
-  const markWidth = resolvePositiveNumber(image?.width ?? width, tokens.defaults.width);
-  const markHeight = resolvePositiveNumber(image?.height ?? height, tokens.defaults.height);
-  const cellWidth = Math.max(1, markWidth + resolvedGapX);
-  const cellHeight = Math.max(1, markHeight + resolvedGapY);
-  const rows = size.height ? Math.ceil(size.height / cellHeight) + 1 : 1;
-  const cols = size.width ? Math.ceil(size.width / cellWidth) + 1 : 1;
-  const onLayoutCalculatedRef = useRef(onLayoutCalculated);
-  onLayoutCalculatedRef.current = onLayoutCalculated;
+  const rGapX = resolveNonNegativeNumber(gapX, tokens.defaults.gapX);
+  const rGapY = resolveNonNegativeNumber(gapY, tokens.defaults.gapY);
+  const rRotate = resolveFiniteNumber(rotate, tokens.defaults.rotate);
+  const rOpacity = Math.max(0, Math.min(1, resolveFiniteNumber(opacity, tokens.defaults.opacity)));
+  const fontSzFromFont = isFiniteNumber(font?.size) ? font.size : isString(font?.size) ? Number.parseFloat(font.size) : undefined;
+  const normFontSz = Math.max(0, resolveFiniteNumber((Number.isFinite(fontSzFromFont ?? Number.NaN) ? fontSzFromFont : undefined) ?? fontSize, tokens.defaults.fontSize));
+  const rColor = font?.color ?? color ?? tokens.colors.mark;
+  const markW = resolvePositiveNumber(image?.width ?? width, tokens.defaults.width);
+  const markH = resolvePositiveNumber(image?.height ?? height, tokens.defaults.height);
+  const cellW = Math.max(1, markW + rGapX);
+  const cellH = Math.max(1, markH + rGapY);
+  const rows = size.height ? Math.ceil(size.height / cellH) + 1 : 1;
+  const cols = size.width ? Math.ceil(size.width / cellW) + 1 : 1;
+  const onLayoutCalcRef = useRef(onLayoutCalculated);
+  onLayoutCalcRef.current = onLayoutCalculated;
   const handleLayout = useCallback(event => {
     if (fullPage) return;
     const {
-      width,
-      height
+      width: w,
+      height: h
     } = event.nativeEvent.layout;
-    if (!isFiniteNumber(width) || !isFiniteNumber(height)) return;
-    const nextWidth = Math.max(0, width),
-      nextHeight = Math.max(0, height);
-    if (lastLayoutRef.current.width === nextWidth && lastLayoutRef.current.height === nextHeight) return;
+    if (!isFiniteNumber(w) || !isFiniteNumber(h)) return;
+    const nw = Math.max(0, w),
+      nh = Math.max(0, h);
+    if (lastLayoutRef.current.width === nw && lastLayoutRef.current.height === nh) return;
     lastLayoutRef.current = {
-      width: nextWidth,
-      height: nextHeight
+      width: nw,
+      height: nh
     };
     setLayoutSize({
-      width: nextWidth,
-      height: nextHeight
+      width: nw,
+      height: nh
     });
-    onLayoutCalculatedRef.current?.({
-      width: nextWidth,
-      height: nextHeight
+    onLayoutCalcRef.current?.({
+      width: nw,
+      height: nh
     });
   }, [fullPage]);
   useEffect(() => {
     if (!fullPage || !isFiniteNumber(window.width) || !isFiniteNumber(window.height) || window.width <= 0 || window.height <= 0) return;
-    onLayoutCalculatedRef.current?.({
+    onLayoutCalcRef.current?.({
       width: window.width,
       height: window.height
     });
   }, [fullPage, window.width, window.height]);
-  const zIndexStyle = useMemo(() => ({
+  const zIdxStyle = useMemo(() => ({
     zIndex
   }), [zIndex]);
   const cellStyle = useMemo(() => ({
-    width: cellWidth,
-    height: cellHeight
-  }), [cellWidth, cellHeight]);
+    width: cellW,
+    height: cellH
+  }), [cellW, cellH]);
   const oddRowStyle = useMemo(() => ({
-    paddingLeft: cellWidth / 2
-  }), [cellWidth]);
+    paddingLeft: cellW / 2
+  }), [cellW]);
   const markStyle = useMemo(() => ({
-    width: markWidth,
-    height: markHeight,
+    width: markW,
+    height: markH,
     transform: [{
-      rotate: `${resolvedRotate}deg`
+      rotate: `${rRotate}deg`
     }]
-  }), [markWidth, markHeight, resolvedRotate]);
-  const imageStyle = useMemo(() => ({
-    width: markWidth,
-    height: markHeight,
-    opacity: resolvedOpacity
-  }), [markWidth, markHeight, resolvedOpacity]);
-  const textBaseStyle = useMemo(() => ({
-    fontSize: normalizedFontSize,
-    color: resolvedColor,
-    opacity: resolvedOpacity,
+  }), [markW, markH, rRotate]);
+  const imgStyle = useMemo(() => ({
+    width: markW,
+    height: markH,
+    opacity: rOpacity
+  }), [markW, markH, rOpacity]);
+  const txtBaseStyle = useMemo(() => ({
+    fontSize: normFontSz,
+    color: rColor,
+    opacity: rOpacity,
     fontFamily: font?.family,
     fontWeight: font?.weight
-  }), [normalizedFontSize, resolvedColor, resolvedOpacity, font?.family, font?.weight]);
-  const rowIndexes = Array.from({
+  }), [normFontSz, rColor, rOpacity, font?.family, font?.weight]);
+  const rowIdx = Array.from({
     length: rows
   }, (_, i) => i);
-  const colIndexes = Array.from({
+  const colIdx = Array.from({
     length: cols
   }, (_, i) => i);
   return /*#__PURE__*/React.createElement(View, _extends({
     pointerEvents: "none",
     importantForAccessibility: "no-hide-descendants",
     accessibilityElementsHidden: true,
-    style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],
+    style: [fullPage ? tokens.layout.absoluteFill : null, zIdxStyle, style],
     onLayout: handleLayout
   }, rest), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.wrapper
-  }, rowIndexes.map(rowIndex => /*#__PURE__*/React.createElement(View, {
-    key: `row-${rowIndex}`,
-    style: [tokens.layout.row, rowIndex % 2 === 0 ? null : oddRowStyle]
-  }, colIndexes.map(colIndex => /*#__PURE__*/React.createElement(View, {
-    key: `col-${rowIndex}-${colIndex}`,
+  }, rowIdx.map(ri => /*#__PURE__*/React.createElement(View, {
+    key: `row-${ri}`,
+    style: [tokens.layout.row, ri % 2 === 0 ? null : oddRowStyle]
+  }, colIdx.map(ci => /*#__PURE__*/React.createElement(View, {
+    key: `col-${ri}-${ci}`,
     style: [tokens.layout.cell, cellStyle]
   }, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.mark, markStyle]
@@ -141,11 +141,11 @@ const WaterMarkImpl = props => {
     source: {
       uri: image.src
     },
-    style: imageStyle,
+    style: imgStyle,
     resizeMode: "contain"
   }) : /*#__PURE__*/React.createElement(Text, {
     allowFontScaling: false,
-    style: [textBaseStyle, textStyle]
+    style: [txtBaseStyle, textStyle]
   }, content))))))));
 };
 const WaterMark = /*#__PURE__*/React.memo(WaterMarkImpl);

package/dist/es/design-system/Text.js

@@ -0,0 +1,19 @@
+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 as RNText } from 'react-native';
+import { useTheme } from './useTheme';
+export const Text = /*#__PURE__*/React.forwardRef(({
+  style,
+  ...rest
+}, ref) => {
+  const {
+    foundations
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(RNText, _extends({
+    ref: ref,
+    style: [{
+      fontFamily: foundations.typography.fontFamily
+    }, style]
+  }, rest));
+});
+Text.displayName = 'Text';

package/dist/es/design-system/createComponentTokensHook.js

@@ -9,7 +9,7 @@ export const createComponentTokensHook = (key, createBaseTokens) => overrides =>
   const co = components?.[key];
   return useMemo(() => {
     const base = createBaseTokens(foundations);
-    const merged = co && overrides ? deepMerge(co, overrides) : co ?? overrides;
-    return merged ? deepMerge(base, merged) : base;
+    const m = co && overrides ? deepMerge(co, overrides) : co ?? overrides;
+    return m ? deepMerge(base, m) : base;
   }, [co, foundations, overrides]);
 };

package/dist/es/design-system/index.js

@@ -1,4 +1,5 @@
 export { ThemeProvider } from './ThemeProvider';
+export { Text } from './Text';
 export { useTheme } from './useTheme';
 export { createComponentTokensHook } from './createComponentTokensHook';
 export { mergeTokensOverride } from './mergeTokensOverride';

package/dist/es/design-system/mergeTokensOverride.js

@@ -1,5 +1,2 @@
 import { deepMerge } from '../utils/deepMerge';
-export const mergeTokensOverride = (base, override) => {
-  if (base && override) return deepMerge(base, override);
-  return base ?? override;
-};
+export const mergeTokensOverride = (base, override) => base && override ? deepMerge(base, override) : base ?? override;

package/dist/es/hooks/useControllableValue.js

@@ -9,21 +9,21 @@ function useControllableValue(props = {}, options = {}) {
     trigger = 'onChange'
   } = options;
   const p = props;
-  const isControlled = hasProp(props, valuePropName);
-  const value = p[valuePropName];
-  const [internalValue, setInternalValue] = useState(() => {
-    if (isControlled) return value;
+  const ctrl = hasProp(props, valuePropName);
+  const val = p[valuePropName];
+  const [intVal, setIntVal] = useState(() => {
+    if (ctrl) return val;
     if (hasProp(props, defaultValuePropName)) return p[defaultValuePropName];
     return defaultValue;
   });
-  const handlerRef = useRef(p[trigger]);
+  const hRef = useRef(p[trigger]);
   useEffect(() => {
-    handlerRef.current = p[trigger];
+    hRef.current = p[trigger];
   }, [props, trigger]);
-  const triggerChange = useCallback((next, ...args) => {
-    if (!isControlled) setInternalValue(next);
-    if (isFunction(handlerRef.current)) handlerRef.current(next, ...args);
-  }, [isControlled]);
-  return [isControlled ? value : internalValue, triggerChange];
+  const setVal = useCallback((next, ...args) => {
+    if (!ctrl) setIntVal(next);
+    if (isFunction(hRef.current)) hRef.current(next, ...args);
+  }, [ctrl]);
+  return [ctrl ? val : intVal, setVal];
 }
 export default useControllableValue;

package/dist/es/hooks/useCountDown.js

@@ -31,31 +31,31 @@ const useCountDown = options => {
   const timerRef = useRef(null);
   const countingRef = useRef(false);
   const [current, setCurrent] = useState(() => parseTime(remainRef.current));
-  const clearTimer = useCallback(() => {
+  const clear = useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const update = useCallback(remain => {
-    remainRef.current = remain;
-    const next = parseTime(remain);
+  const update = useCallback(rem => {
+    remainRef.current = rem;
+    const next = parseTime(rem);
     setCurrent(next);
     onChangeRef.current?.(next);
-    if (remain === 0) {
+    if (rem === 0) {
       countingRef.current = false;
-      clearTimer();
+      clear();
       onFinishRef.current?.();
     }
-  }, [clearTimer]);
+  }, [clear]);
   const tick = useCallback(() => {
     if (!countingRef.current) return;
-    clearTimer();
-    const remain = Math.max(endTimeRef.current - Date.now(), 0);
-    update(remain);
-    if (remain <= 0) return;
-    timerRef.current = setTimeout(tick, msRef.current ? Math.max(1, Math.min(30, remain)) : Math.max(1, Math.min(remain, remain % 1000 + 1)));
-  }, [clearTimer, update]);
+    clear();
+    const rem = Math.max(endTimeRef.current - Date.now(), 0);
+    update(rem);
+    if (rem <= 0) return;
+    timerRef.current = setTimeout(tick, msRef.current ? Math.max(1, Math.min(30, rem)) : Math.max(1, Math.min(rem, rem % 1000 + 1)));
+  }, [clear, update]);
   const start = useCallback(() => {
     if (countingRef.current || remainRef.current <= 0) return;
     countingRef.current = true;
@@ -66,16 +66,16 @@ const useCountDown = options => {
     if (!countingRef.current) return;
     countingRef.current = false;
     remainRef.current = Math.max(endTimeRef.current - Date.now(), 0);
-    clearTimer();
-  }, [clearTimer]);
-  const reset = useCallback(newTime => {
+    clear();
+  }, [clear]);
+  const reset = useCallback(newT => {
     pause();
-    const n = Math.max(0, isNumber(newTime) ? newTime : timeRef.current);
+    const n = Math.max(0, isNumber(newT) ? newT : timeRef.current);
     remainRef.current = n;
     endTimeRef.current = Date.now() + n;
     setCurrent(parseTime(n));
   }, [pause]);
-  useEffect(() => () => clearTimer(), [clearTimer]);
+  useEffect(() => () => clear(), [clear]);
   return {
     start,
     pause,

package/dist/es/platform/measure.js

@@ -10,21 +10,23 @@ export const measureInWindow = (node, cb) => {
     cb(null);
     return;
   }
+  ;
   try {
     const mn = node;
     if (isFunction(mn.measureInWindow)) {
       mn.measureInWindow((x, y, w, h) => cb(toRect(x, y, w, h)));
       return;
     }
+    ;
     const dn = node;
     if (isFunction(dn.getBoundingClientRect)) {
       const r = dn.getBoundingClientRect();
       cb(toRect(r?.left, r?.top, r?.width, r?.height));
       return;
     }
+    ;
+    cb(null);
   } catch {
     cb(null);
-    return;
   }
-  cb(null);
 };

package/dist/es/utils/color.js

@@ -22,7 +22,4 @@ export const withAlpha = (color, alpha) => {
   }
   const rgb = parseRgb(t);
   return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${a})` : t;
-};
-export const ensureRgba = (color, alpha) => color.trim().toLowerCase().startsWith('rgba') ? color : withAlpha(color, alpha);
-const GRADIENT_RE = /(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\))/i;
-export const extractFirstColorToken = input => input ? input.match(GRADIENT_RE)?.[0] : undefined;
+};

package/dist/es/utils/compare.js

@@ -6,8 +6,8 @@ export const shallowEqualArray = (a = [], b = []) => {
 export const shallowEqualObject = (a, b) => {
   if (a === b) return true;
   if (!a || !b) return false;
-  const ak = Object.keys(a);
-  if (ak.length !== Object.keys(b).length) return false;
-  for (const k of ak) if (a[k] !== b[k]) return false;
+  const ks = Object.keys(a);
+  if (ks.length !== Object.keys(b).length) return false;
+  for (const k of ks) if (a[k] !== b[k]) return false;
   return true;
 };

package/dist/es/utils/date.js

@@ -12,7 +12,7 @@ export const getTrueValue = value => {
 };
 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) => {
+export const formatDuration = (fmt, time) => {
   let {
     days,
     hours,
@@ -20,7 +20,7 @@ export const formatDuration = (format, time) => {
     seconds,
     milliseconds
   } = time;
-  let t = format;
+  let t = fmt;
   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;

package/dist/es/utils/deepMerge.js

@@ -5,15 +5,15 @@ export function deepMerge(target, source) {
   const out = Array.isArray(target) ? [...target] : {
     ...target
   };
-  for (const key of Object.keys(source)) {
-    const sv = source[key];
+  for (const k of Object.keys(source)) {
+    const sv = source[k];
     if (sv === undefined) continue;
-    const tv = target[key];
+    const tv = target[k];
     if (isPlainObject(tv) && isPlainObject(sv)) {
-      out[key] = deepMerge(tv, sv);
+      out[k] = deepMerge(tv, sv);
       continue;
     }
-    out[key] = Array.isArray(sv) ? [...sv] : isPlainObject(sv) ? {
+    out[k] = Array.isArray(sv) ? [...sv] : isPlainObject(sv) ? {
       ...sv
     } : sv;
   }

package/dist/es/utils/hairline.js

@@ -88,5 +88,6 @@ export const createHairlineView = ({
     s.transform = [SCALES[position]];
     s.transformOrigin = ORIGINS[position];
   }
+  ;
   return s;
 };

package/dist/es/utils/render.js

@@ -1,6 +1,6 @@
 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 { Text } from '../design-system';
 import { isText } from './validate';
 export const renderTextOrNode = (content, textStyle, textProps) => isText(content) ? /*#__PURE__*/React.createElement(Text, _extends({
   style: textStyle

package/dist/es/utils/validate.js

@@ -11,5 +11,4 @@ export const isUndefined = val => typeof val === 'undefined';
 export const isObject = val => val !== null && typeof val === 'object';
 export const isValidNode = node => isRenderable(node) && (typeof node !== 'string' || node.length > 0);
 export const isPlainObject = val => !!val && typeof val === 'object' && !Array.isArray(val) && ! /*#__PURE__*/isValidElement(val);
-export const isTwoCNChar = value => /^(?:[\u4e00-\u9fa5]){2}$/.test(value);
-export const isImageUrlString = url => /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i.test(url);
+export const isTwoCNChar = value => /^(?:[\u4e00-\u9fa5]){2}$/.test(value);

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

@@ -34,6 +34,7 @@ export interface DialogTokens {
         roundButtonHeight: number;
     };
     typography: {
+        fontFamily: string;
         titleSize: number;
         titleLineHeight: number;
         titleWeight: TextStyle['fontWeight'];

package/dist/types/components/image-preview/tokens.d.ts

@@ -20,6 +20,7 @@ export interface ImagePreviewTokens {
         indexBadge: number;
     };
     typography: {
+        fontFamily: string;
         indexTextSize: number;
     };
 }

package/dist/types/components/nav-bar/tokens.d.ts

@@ -1,4 +1,4 @@
 import { type Foundations } from '../../design-system/tokens';
 import type { NavBarTokens } from './types';
-export declare const createNavBarTokens: ({ palette, spacing, fontSize, }: Foundations) => NavBarTokens;
+export declare const createNavBarTokens: ({ palette, spacing, fontSize, typography, }: Foundations) => NavBarTokens;
 export declare const useNavBarTokens: (overrides?: import("../..").DeepPartial<NavBarTokens> | undefined) => NavBarTokens;

package/dist/types/components/notice-bar/tokens.d.ts

@@ -5,6 +5,7 @@ export interface NoticeBarTokens {
         background: string;
     };
     typography: {
+        fontFamily: string;
         fontSize: number;
     };
     layout: {

package/dist/types/components/number-keyboard/tokens.d.ts

@@ -21,8 +21,13 @@ export interface NumberKeyboardTokens {
         keyHeight: number;
         closeHeight: number;
         fontSize: number;
+        defaultIconFontSize?: number;
+        auxFontSize?: number;
         titleFontSize: number;
     };
+    typography: {
+        fontFamily: string;
+    };
     radii: {
         key: number;
     };

package/dist/types/components/picker/Picker.d.ts

@@ -15,7 +15,7 @@ export declare const toArrayValue: (value?: PickerValue[] | PickerValue | null)
 export declare const findEnabledIndex: (options: PickerOption[], startIdx: number) => number;
 export declare const prepareColumns: (input?: PickerColumns) => PreparedPickerColumns;
 export declare const normalizePicker: (prep: PreparedPickerColumns, raw?: PickerValue[]) => NormalizedPickerResult;
-export declare function usePickerValue({ columns, valueProp, defaultValue, emitConfirmOnAutoSelect, onChange, onConfirm, }: {
+export declare function usePickerValue({ columns, valueProp, defaultValue, emitConfirmOnAutoSelect, onChange, onConfirm }: {
     columns?: PickerColumns;
     valueProp?: PickerProps['value'];
     defaultValue?: PickerProps['defaultValue'];

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

@@ -24,6 +24,7 @@ export interface PopupTokens {
         closeIconPadding: number;
     };
     typography: {
+        fontFamily: string;
         titleSize: number;
         titleWeight: TextStyle['fontWeight'];
         descriptionSize: number;