react-native-system-ui 1.0.0 → 1.0.1

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

@@ -38,11 +38,11 @@ const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props,
   const {
     tokensOverride,
     children,
-    type: typeProp,
-    color: colorProp,
-    size: sizeProp,
+    type: typeP,
+    color: colorP,
+    size: sizeP,
     level,
-    disabled: disabledProp,
+    disabled: disP,
     delete: deleted,
     underline,
     center,
@@ -53,9 +53,9 @@ const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props,
     ...textProps
   } = props;
   const tokens = (0, _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] = (0, _react().useState)(false);
@@ -67,13 +67,14 @@ const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props,
     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,
@@ -81,12 +82,12 @@ const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props,
     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 = (0, _react().useCallback)(() => {
     if (!ellipsisConfig) return;
     setExpanded(prev => {
@@ -95,24 +96,24 @@ const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props,
       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().default.createElement(_reactNative().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().default.createElement(_reactNative().View, {
+  if (!showAct) return center ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.centerWrapper
   }, textNode) : textNode;
   const actionNode = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -120,8 +121,8 @@ const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props,
   }, textNode, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     onPress: handleToggleEllipsis,
     suppressHighlighting: true,
-    style: actionTextStyle
-  }, actionLabel));
+    style: actTxtStyle
+  }, actLabel));
   return center ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.centerWrapper
   }, actionNode) : actionNode;
@@ -156,6 +157,7 @@ const TypographyLink = /*#__PURE__*/_react().default.forwardRef((props, ref) =>
       onPress(event);
       return;
     }
+    ;
     if (href) {
       try {
         await _reactNative().Linking.openURL(href);

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

@@ -27,7 +27,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,
@@ -38,8 +38,8 @@ const WaterMarkImpl = props => {
     fontSize,
     color,
     opacity,
-    zIndex: zIndexProp,
-    fullPage: fullPageProp,
+    zIndex: zIdxP,
+    fullPage: fullP,
     tokensOverride,
     style,
     onLayoutCalculated,
@@ -47,9 +47,9 @@ const WaterMarkImpl = props => {
     ...rest
   } = props;
   const tokens = (0, _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 = (0, _reactNative().useWindowDimensions)();
   const [layoutSize, setLayoutSize] = (0, _react().useState)({
     width: 0,
@@ -60,99 +60,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 = (0, _utils.isFiniteNumber)(font?.size) ? font.size : (0, _utils.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 = (0, _react().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 = (0, _utils.isFiniteNumber)(font?.size) ? font.size : (0, _utils.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 = (0, _react().useRef)(onLayoutCalculated);
+  onLayoutCalcRef.current = onLayoutCalculated;
   const handleLayout = (0, _react().useCallback)(event => {
     if (fullPage) return;
     const {
-      width,
-      height
+      width: w,
+      height: h
     } = event.nativeEvent.layout;
-    if (!(0, _utils.isFiniteNumber)(width) || !(0, _utils.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 (!(0, _utils.isFiniteNumber)(w) || !(0, _utils.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]);
   (0, _react().useEffect)(() => {
     if (!fullPage || !(0, _utils.isFiniteNumber)(window.width) || !(0, _utils.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 = (0, _react().useMemo)(() => ({
+  const zIdxStyle = (0, _react().useMemo)(() => ({
     zIndex
   }), [zIndex]);
   const cellStyle = (0, _react().useMemo)(() => ({
-    width: cellWidth,
-    height: cellHeight
-  }), [cellWidth, cellHeight]);
+    width: cellW,
+    height: cellH
+  }), [cellW, cellH]);
   const oddRowStyle = (0, _react().useMemo)(() => ({
-    paddingLeft: cellWidth / 2
-  }), [cellWidth]);
+    paddingLeft: cellW / 2
+  }), [cellW]);
   const markStyle = (0, _react().useMemo)(() => ({
-    width: markWidth,
-    height: markHeight,
+    width: markW,
+    height: markH,
     transform: [{
-      rotate: `${resolvedRotate}deg`
+      rotate: `${rRotate}deg`
     }]
-  }), [markWidth, markHeight, resolvedRotate]);
-  const imageStyle = (0, _react().useMemo)(() => ({
-    width: markWidth,
-    height: markHeight,
-    opacity: resolvedOpacity
-  }), [markWidth, markHeight, resolvedOpacity]);
-  const textBaseStyle = (0, _react().useMemo)(() => ({
-    fontSize: normalizedFontSize,
-    color: resolvedColor,
-    opacity: resolvedOpacity,
+  }), [markW, markH, rRotate]);
+  const imgStyle = (0, _react().useMemo)(() => ({
+    width: markW,
+    height: markH,
+    opacity: rOpacity
+  }), [markW, markH, rOpacity]);
+  const txtBaseStyle = (0, _react().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().default.createElement(_reactNative().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().default.createElement(_reactNative().View, {
     style: tokens.layout.wrapper
-  }, rowIndexes.map(rowIndex => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    key: `row-${rowIndex}`,
-    style: [tokens.layout.row, rowIndex % 2 === 0 ? null : oddRowStyle]
-  }, colIndexes.map(colIndex => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    key: `col-${rowIndex}-${colIndex}`,
+  }, rowIdx.map(ri => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    key: `row-${ri}`,
+    style: [tokens.layout.row, ri % 2 === 0 ? null : oddRowStyle]
+  }, colIdx.map(ci => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    key: `col-${ri}-${ci}`,
     style: [tokens.layout.cell, cellStyle]
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.mark, markStyle]
@@ -160,11 +160,11 @@ const WaterMarkImpl = props => {
     source: {
       uri: image.src
     },
-    style: imageStyle,
+    style: imgStyle,
     resizeMode: "contain"
   }) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     allowFontScaling: false,
-    style: [textBaseStyle, textStyle]
+    style: [txtBaseStyle, textStyle]
   }, content))))))));
 };
 const WaterMark = /*#__PURE__*/_react().default.memo(WaterMarkImpl);

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _useTheme = require("./useTheme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const Text = exports.Text = /*#__PURE__*/_react().default.forwardRef(({
+  style,
+  ...rest
+}, ref) => {
+  const {
+    foundations
+  } = (0, _useTheme.useTheme)();
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
+    ref: ref,
+    style: [{
+      fontFamily: foundations.typography.fontFamily
+    }, style]
+  }, rest));
+});
+Text.displayName = 'Text';

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

@@ -21,8 +21,8 @@ const createComponentTokensHook = (key, createBaseTokens) => overrides => {
   const co = components?.[key];
   return (0, _react().useMemo)(() => {
     const base = createBaseTokens(foundations);
-    const merged = co && overrides ? (0, _deepMerge.deepMerge)(co, overrides) : co ?? overrides;
-    return merged ? (0, _deepMerge.deepMerge)(base, merged) : base;
+    const m = co && overrides ? (0, _deepMerge.deepMerge)(co, overrides) : co ?? overrides;
+    return m ? (0, _deepMerge.deepMerge)(base, m) : base;
   }, [co, foundations, overrides]);
 };
 exports.createComponentTokensHook = createComponentTokensHook;

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

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () {
+    return _Text.Text;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {
@@ -52,6 +58,7 @@ Object.defineProperty(exports, "useTheme", {
   }
 });
 var _ThemeProvider = require("./ThemeProvider");
+var _Text = require("./Text");
 var _useTheme = require("./useTheme");
 var _createComponentTokensHook = require("./createComponentTokensHook");
 var _mergeTokensOverride = require("./mergeTokensOverride");

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

@@ -5,8 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mergeTokensOverride = void 0;
 var _deepMerge = require("../utils/deepMerge");
-const mergeTokensOverride = (base, override) => {
-  if (base && override) return (0, _deepMerge.deepMerge)(base, override);
-  return base ?? override;
-};
+const mergeTokensOverride = (base, override) => base && override ? (0, _deepMerge.deepMerge)(base, override) : base ?? override;
 exports.mergeTokensOverride = mergeTokensOverride;

package/dist/cjs/hooks/useControllableValue.js

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

package/dist/cjs/hooks/useCountDown.js

@@ -44,31 +44,31 @@ const useCountDown = options => {
   const timerRef = (0, _react().useRef)(null);
   const countingRef = (0, _react().useRef)(false);
   const [current, setCurrent] = (0, _react().useState)(() => parseTime(remainRef.current));
-  const clearTimer = (0, _react().useCallback)(() => {
+  const clear = (0, _react().useCallback)(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const update = (0, _react().useCallback)(remain => {
-    remainRef.current = remain;
-    const next = parseTime(remain);
+  const update = (0, _react().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 = (0, _react().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 = (0, _react().useCallback)(() => {
     if (countingRef.current || remainRef.current <= 0) return;
     countingRef.current = true;
@@ -79,16 +79,16 @@ const useCountDown = options => {
     if (!countingRef.current) return;
     countingRef.current = false;
     remainRef.current = Math.max(endTimeRef.current - Date.now(), 0);
-    clearTimer();
-  }, [clearTimer]);
-  const reset = (0, _react().useCallback)(newTime => {
+    clear();
+  }, [clear]);
+  const reset = (0, _react().useCallback)(newT => {
     pause();
-    const n = Math.max(0, (0, _validate.isNumber)(newTime) ? newTime : timeRef.current);
+    const n = Math.max(0, (0, _validate.isNumber)(newT) ? newT : timeRef.current);
     remainRef.current = n;
     endTimeRef.current = Date.now() + n;
     setCurrent(parseTime(n));
   }, [pause]);
-  (0, _react().useEffect)(() => () => clearTimer(), [clearTimer]);
+  (0, _react().useEffect)(() => () => clear(), [clear]);
   return {
     start,
     pause,

package/dist/cjs/platform/measure.js

@@ -16,22 +16,24 @@ const measureInWindow = (node, cb) => {
     cb(null);
     return;
   }
+  ;
   try {
     const mn = node;
     if ((0, _validate.isFunction)(mn.measureInWindow)) {
       mn.measureInWindow((x, y, w, h) => cb(toRect(x, y, w, h)));
       return;
     }
+    ;
     const dn = node;
     if ((0, _validate.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);
 };
 exports.measureInWindow = measureInWindow;

package/dist/cjs/utils/color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withAlpha = exports.hexToRgb = exports.extractFirstColorToken = exports.ensureRgba = void 0;
+exports.withAlpha = exports.hexToRgb = void 0;
 var _number = require("./number");
 const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 const hexToRgb = input => {
@@ -30,9 +30,4 @@ const withAlpha = (color, alpha) => {
   const rgb = parseRgb(t);
   return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${a})` : t;
 };
-exports.withAlpha = withAlpha;
-const ensureRgba = (color, alpha) => color.trim().toLowerCase().startsWith('rgba') ? color : withAlpha(color, alpha);
-exports.ensureRgba = ensureRgba;
-const GRADIENT_RE = /(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\))/i;
-const extractFirstColorToken = input => input ? input.match(GRADIENT_RE)?.[0] : undefined;
-exports.extractFirstColorToken = extractFirstColorToken;
+exports.withAlpha = withAlpha;

package/dist/cjs/utils/compare.js

@@ -13,9 +13,9 @@ exports.shallowEqualArray = shallowEqualArray;
 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;
 };
 exports.shallowEqualObject = shallowEqualObject;

package/dist/cjs/utils/date.js

@@ -23,7 +23,7 @@ const getMonthEndDay = (year, month) => 32 - new Date(year, month - 1, 32).getDa
 exports.getMonthEndDay = getMonthEndDay;
 const isValidDate = value => value instanceof Date && !Number.isNaN(value.getTime());
 exports.isValidDate = isValidDate;
-const formatDuration = (format, time) => {
+const formatDuration = (fmt, time) => {
   let {
     days,
     hours,
@@ -31,7 +31,7 @@ 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/cjs/utils/deepMerge.js

@@ -11,15 +11,15 @@ 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/cjs/utils/hairline.js

@@ -101,6 +101,7 @@ const createHairlineView = ({
     s.transform = [SCALES[position]];
     s.transformOrigin = ORIGINS[position];
   }
+  ;
   return s;
 };
 exports.createHairlineView = createHairlineView;

package/dist/cjs/utils/render.js

@@ -11,17 +11,11 @@ function _react() {
   };
   return data;
 }
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
+var _designSystem = require("../design-system");
 var _validate = require("./validate");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
-const renderTextOrNode = (content, textStyle, textProps) => (0, _validate.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
+const renderTextOrNode = (content, textStyle, textProps) => (0, _validate.isText)(content) ? /*#__PURE__*/_react().default.createElement(_designSystem.Text, _extends({
   style: textStyle
 }, textProps), content) : content;
 exports.renderTextOrNode = renderTextOrNode;

package/dist/cjs/utils/validate.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isValidNode = exports.isUndefined = exports.isTwoCNChar = exports.isText = exports.isString = exports.isRenderable = exports.isPlainObject = exports.isObject = exports.isNumber = exports.isImageUrlString = exports.isFunction = exports.isFiniteNumber = exports.isDef = exports.isBoolean = void 0;
+exports.isValidNode = exports.isUndefined = exports.isTwoCNChar = exports.isText = exports.isString = exports.isRenderable = exports.isPlainObject = exports.isObject = exports.isNumber = exports.isFunction = exports.isFiniteNumber = exports.isDef = exports.isBoolean = void 0;
 function _react() {
   const data = require("react");
   _react = function () {
@@ -36,6 +36,4 @@ exports.isValidNode = isValidNode;
 const isPlainObject = val => !!val && typeof val === 'object' && !Array.isArray(val) && ! /*#__PURE__*/(0, _react().isValidElement)(val);
 exports.isPlainObject = isPlainObject;
 const isTwoCNChar = value => /^(?:[\u4e00-\u9fa5]){2}$/.test(value);
-exports.isTwoCNChar = isTwoCNChar;
-const isImageUrlString = url => /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i.test(url);
-exports.isImageUrlString = isImageUrlString;
+exports.isTwoCNChar = isTwoCNChar;