react-native-system-ui 0.0.7 → 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,35 +96,33 @@ 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, {
-      style: tokens.layout.centerWrapper
-    }, textNode) : textNode;
-  }
+  if (!showAct) return center ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.centerWrapper
+  }, textNode) : textNode;
   const actionNode = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.actionRow
   }, 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;
@@ -158,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

@@ -22,9 +22,12 @@ var _utils = require("../../utils");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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 WaterMark = props => {
+const resolveFiniteNumber = (value, fallback) => (0, _utils.isFiniteNumber)(value) ? value : fallback;
+const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteNumber(value, fallback));
+const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
+const WaterMarkImpl = props => {
   const {
-    content: contentProp,
+    content: contentP,
     width,
     height,
     gapX,
@@ -35,8 +38,8 @@ const WaterMark = props => {
     fontSize,
     color,
     opacity,
-    zIndex: zIndexProp,
-    fullPage: fullPageProp,
+    zIndex: zIdxP,
+    fullPage: fullP,
     tokensOverride,
     style,
     onLayoutCalculated,
@@ -44,12 +47,9 @@ const WaterMark = props => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useWaterMarkTokens)(tokensOverride);
-  const resolveFiniteNumber = (value, fallback) => (0, _utils.isFiniteNumber)(value) ? value : fallback;
-  const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteNumber(value, fallback));
-  const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
-  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,98 +60,99 @@ const WaterMark = 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 resolvedFontSize = resolveFiniteNumber((Number.isFinite(fontSizeFromFont ?? Number.NaN) ? fontSizeFromFont : undefined) ?? fontSize, tokens.defaults.fontSize);
-  const normalizedFontSize = Math.max(0, resolvedFontSize);
-  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 handleLayout = event => {
+  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);
-    const 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
     });
-    onLayoutCalculated?.({
-      width: nextWidth,
-      height: nextHeight
+    onLayoutCalcRef.current?.({
+      width: nw,
+      height: nh
     });
-  };
+  }, [fullPage]);
   (0, _react().useEffect)(() => {
-    if (!fullPage) return;
-    if (!(0, _utils.isFiniteNumber)(window.width) || !(0, _utils.isFiniteNumber)(window.height)) return;
-    if (window.width <= 0 || window.height <= 0) return;
-    onLayoutCalculated?.({
+    if (!fullPage || !(0, _utils.isFiniteNumber)(window.width) || !(0, _utils.isFiniteNumber)(window.height) || window.width <= 0 || window.height <= 0) return;
+    onLayoutCalcRef.current?.({
       width: window.width,
       height: window.height
     });
-  }, [fullPage, onLayoutCalculated, window.width, window.height]);
-  const zIndexStyle = {
+  }, [fullPage, window.width, window.height]);
+  const zIdxStyle = (0, _react().useMemo)(() => ({
     zIndex
-  };
-  const cellStyle = {
-    width: cellWidth,
-    height: cellHeight
-  };
-  const oddRowStyle = {
-    paddingLeft: cellWidth / 2
-  };
-  const markStyle = {
-    width: markWidth,
-    height: markHeight,
+  }), [zIndex]);
+  const cellStyle = (0, _react().useMemo)(() => ({
+    width: cellW,
+    height: cellH
+  }), [cellW, cellH]);
+  const oddRowStyle = (0, _react().useMemo)(() => ({
+    paddingLeft: cellW / 2
+  }), [cellW]);
+  const markStyle = (0, _react().useMemo)(() => ({
+    width: markW,
+    height: markH,
     transform: [{
-      rotate: `${resolvedRotate}deg`
+      rotate: `${rRotate}deg`
     }]
-  };
-  const imageStyle = {
-    width: markWidth,
-    height: markHeight,
-    opacity: resolvedOpacity
-  };
-  const textBaseStyle = {
-    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
-  };
-  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",
-    style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
+    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]
@@ -159,12 +160,13 @@ const WaterMark = 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);
 WaterMark.displayName = 'WaterMark';
 var _default = exports.default = WaterMark;

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/ThemeProvider.js

@@ -15,21 +15,15 @@ var _ThemeContext = require("./ThemeContext");
 var _tokens = require("./tokens");
 var _validate = require("../utils/validate");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const isThemeTokens = value => {
-  return Boolean((0, _validate.isObject)(value) && 'palette' in value && 'spacing' in value);
-};
+const isTokens = v => Boolean((0, _validate.isObject)(v) && 'palette' in v && 'spacing' in v);
 const ThemeProvider = ({
   value,
   children
 }) => {
-  const resolved = (0, _react().useMemo)(() => {
-    const foundations = isThemeTokens(value) ? value : (0, _tokens.createTokens)(value?.foundations);
-    const components = !isThemeTokens(value) ? value?.components : undefined;
-    return {
-      foundations,
-      components
-    };
-  }, [value]);
+  const resolved = (0, _react().useMemo)(() => ({
+    foundations: isTokens(value) ? value : (0, _tokens.createTokens)(value?.foundations),
+    components: isTokens(value) ? undefined : value?.components
+  }), [value]);
   return /*#__PURE__*/_react().default.createElement(_ThemeContext.ThemeContext.Provider, {
     value: resolved
   }, children);

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

@@ -13,18 +13,16 @@ function _react() {
 }
 var _deepMerge = require("../utils/deepMerge");
 var _useTheme = require("./useTheme");
-const createComponentTokensHook = (key, createBaseTokens) => {
-  return overrides => {
-    const {
-      foundations,
-      components
-    } = (0, _useTheme.useTheme)();
-    const componentOverrides = components?.[key];
-    return (0, _react().useMemo)(() => {
-      const base = createBaseTokens(foundations);
-      const merged = componentOverrides && overrides ? (0, _deepMerge.deepMerge)(componentOverrides, overrides) : componentOverrides ?? overrides;
-      return merged ? (0, _deepMerge.deepMerge)(base, merged) : base;
-    }, [componentOverrides, foundations, overrides]);
-  };
+const createComponentTokensHook = (key, createBaseTokens) => overrides => {
+  const {
+    foundations,
+    components
+  } = (0, _useTheme.useTheme)();
+  const co = components?.[key];
+  return (0, _react().useMemo)(() => {
+    const base = createBaseTokens(foundations);
+    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/design-system/presets.js

@@ -137,11 +137,10 @@ const auroraOverrides = {
     lineHeightMultiplier: 1.25
   }
 };
-const buildPreset = overrides => (0, _tokens.createTokens)(overrides);
 const themePresets = exports.themePresets = {
   light: _tokens.defaultTokens,
-  dark: buildPreset(darkOverrides),
-  aurora: buildPreset(auroraOverrides)
+  dark: (0, _tokens.createTokens)(darkOverrides),
+  aurora: (0, _tokens.createTokens)(auroraOverrides)
 };
 const getThemePreset = name => themePresets[name];
 exports.getThemePreset = getThemePreset;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultTokens = exports.defaultFoundations = exports.createTokens = exports.buildFoundations = void 0;
+exports.defaultTokens = exports.defaultFoundations = exports.createTokens = void 0;
 var _deepMerge = require("../utils/deepMerge");
 const defaultFoundations = exports.defaultFoundations = {
   palette: {
@@ -130,15 +130,6 @@ const defaultFoundations = exports.defaultFoundations = {
     pressed: 0.85
   }
 };
-const buildFoundations = overrides => {
-  if (!overrides) {
-    return defaultFoundations;
-  }
-  return (0, _deepMerge.deepMerge)(defaultFoundations, overrides);
-};
-exports.buildFoundations = buildFoundations;
-const createTokens = overrides => {
-  return buildFoundations(overrides);
-};
+const createTokens = overrides => overrides ? (0, _deepMerge.deepMerge)(defaultFoundations, overrides) : defaultFoundations;
 exports.createTokens = createTokens;
 const defaultTokens = exports.defaultTokens = defaultFoundations;

package/dist/cjs/hooks/animation/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _useReducedMotion.getReducedMotion;
+  }
+});
+Object.defineProperty(exports, "useAnimatedTransition", {
+  enumerable: true,
+  get: function () {
+    return _useAnimatedTransition.useAnimatedTransition;
+  }
+});
+Object.defineProperty(exports, "useReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _useReducedMotion.useReducedMotion;
+  }
+});
+var _useReducedMotion = require("./useReducedMotion");
+var _useAnimatedTransition = require("./useAnimatedTransition");

package/dist/cjs/hooks/animation/useAnimatedTransition.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatedTransition = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _platform = require("../../platform");
+var _useReducedMotion = require("./useReducedMotion");
+const EASE_OUT = _reactNative().Easing.bezier(0.075, 0.82, 0.165, 1.0);
+const EASE_IN = _reactNative().Easing.bezier(0.55, 0.055, 0.675, 0.19);
+const useAnimatedTransition = ({
+  visible,
+  duration = 300,
+  enterEasing = EASE_OUT,
+  exitEasing = EASE_IN,
+  useNativeDriver: driver = _platform.nativeDriverEnabled
+}) => {
+  const reduceMotion = (0, _useReducedMotion.useReducedMotion)();
+  const [mounted, setMounted] = (0, _react().useState)(visible);
+  const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(visible ? 1 : 0)).current;
+  const animRef = (0, _react().useRef)(null);
+  const seqRef = (0, _react().useRef)(0);
+  const run = (0, _react().useCallback)((show, dur, easeIn, easeOut, nd) => {
+    seqRef.current += 1;
+    const seq = seqRef.current;
+    animRef.current?.stop();
+    if (show) setMounted(true);
+    if (dur <= 0) {
+      progress.setValue(show ? 1 : 0);
+      if (!show) setMounted(false);
+      return;
+    }
+    const anim = _reactNative().Animated.timing(progress, {
+      toValue: show ? 1 : 0,
+      duration: dur,
+      easing: show ? easeIn : easeOut,
+      useNativeDriver: nd,
+      isInteraction: false
+    });
+    animRef.current = anim;
+    anim.start(({
+      finished
+    }) => {
+      if (finished && seq === seqRef.current && !show) setMounted(false);
+    });
+  }, [progress]);
+  (0, _react().useEffect)(() => {
+    run(visible, reduceMotion ? 0 : duration, enterEasing, exitEasing, driver);
+  }, [visible, reduceMotion, duration, enterEasing, exitEasing, driver, run]);
+  (0, _react().useEffect)(() => () => {
+    animRef.current?.stop();
+  }, []);
+  return {
+    mounted,
+    progress
+  };
+};
+exports.useAnimatedTransition = useAnimatedTransition;