react-native-system-ui 0.0.2 → 0.0.3

package/dist/es/components/index.js

@@ -0,0 +1,74 @@
+export { default as Button } from './button';
+export { default as Cell } from './cell';
+export { CellGroup } from './cell';
+export { default as Flex } from './flex';
+export { default as Space } from './space';
+export { default as Divider } from './divider';
+export { default as Tag } from './tag';
+export { Checkbox } from './checkbox';
+export { CheckboxGroup } from './checkbox';
+export { Radio } from './radio';
+export { RadioGroup } from './radio';
+export { default as Field } from './field';
+export { FieldGroup } from './field';
+export { default as Input } from './input';
+export { default as Form } from './form';
+export { default as Switch } from './switch';
+export { default as Badge } from './badge';
+export { default as Avatar } from './avatar';
+export { default as Grid } from './grid';
+export { default as Typography } from './typography';
+export { default as Loading } from './loading';
+export { default as Empty } from './empty';
+export { default as Image } from './image';
+export { useImageTokens } from './image';
+export { default as Progress } from './progress';
+export { default as Circle } from './circle';
+export { default as NoticeBar } from './notice-bar';
+export { default as Slider } from './slider';
+export { default as Stepper } from './stepper';
+export { default as Rate } from './rate';
+export { default as Selector } from './selector';
+export { default as Search } from './search';
+export { default as PasswordInput } from './password-input';
+export { default as Picker } from './picker';
+export { default as NumberKeyboard } from './number-keyboard';
+export { default as Collapse } from './collapse';
+export { default as Popup } from './popup';
+export { default as Overlay } from './overlay';
+export { default as Dialog } from './dialog';
+export { default as Toast } from './toast';
+export { default as Notify } from './notify';
+export { Portal } from './portal';
+export { PortalHost } from './portal';
+export { SafeAreaView } from './safe-area-view';
+export { ConfigProvider } from './config-provider';
+export { useLocale } from './config-provider';
+export { zhCN } from './config-provider';
+export { enUS } from './config-provider';
+export { default as DatetimePicker } from './datetime-picker';
+export { default as Calendar } from './calendar';
+export { default as Cascader } from './cascader';
+export { default as Tabs } from './tabs';
+export { default as Tabbar } from './tabbar';
+export { default as NavBar } from './nav-bar';
+export { default as Sidebar } from './sidebar';
+export { default as IndexBar } from './index-bar';
+export { default as ActionSheet } from './action-sheet';
+export { default as ShareSheet } from './share-sheet';
+export { default as DropdownMenu } from './dropdown-menu';
+export { default as Area } from './area';
+export { default as List } from './list';
+export { default as PullRefresh } from './pull-refresh';
+export { default as ImagePreview } from './image-preview';
+export { default as Swiper } from './swiper';
+export { SwiperItem } from './swiper';
+export { SwiperPagIndicator } from './swiper';
+export { useSwiperPagIndicatorTokens } from './swiper';
+export { default as Uploader } from './uploader';
+export { useUploaderTokens } from './uploader';
+export { default as Skeleton } from './skeleton';
+export { useSkeletonTokens } from './skeleton';
+export { default as CountDown } from './count-down';
+export { default as WaterMark } from './water-mark';
+export { default as Pagination } from './pagination';

package/dist/es/{nav-bar → components/nav-bar}/NavBar.js

@@ -1,10 +1,11 @@
 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, { useCallback, useState } from 'react';
-import { Pressable, SafeAreaView, Text, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import { ArrowLeft } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
 import { createHairlineBorderBottom } from '../../utils/hairline';
 import { isRenderable, isText } from '../../utils/validate';
+import { SafeAreaView } from '../safe-area-view';
 import { useNavBarTokens } from './tokens';
 const NavBarBase = props => {
   const {

package/dist/es/{notify → components/notify}/Notify.js

@@ -1,12 +1,11 @@
 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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Pressable, SafeAreaView, Text, View } from 'react-native';
+import React from 'react';
+import { Animated, Pressable, Text, View } from 'react-native';
 import { isFunction, isText } from '../../utils';
-import { useAriaPress } from '../../hooks';
+import { useAriaPress, useSafeAreaPadding } from '../../hooks';
 import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
 import Portal from '../portal/Portal';
 import { useOverlayStack } from '../overlay';
-import { SafeAreaClipProvider } from '../safe-area';
 import { useNotifyTokens } from './tokens';
 export const Notify = props => {
   const {
@@ -29,18 +28,24 @@ export const Notify = props => {
     onClosed
   } = props;
   const tokens = useNotifyTokens(tokensOverride);
+  const paddingVertical = tokens.spacing.paddingVertical;
+  const safeAreaPadding = useSafeAreaPadding({
+    top: paddingVertical,
+    bottom: paddingVertical
+  });
   const type = typeProp ?? tokens.defaults.type;
   const position = positionProp ?? tokens.defaults.position;
   const closeOnClick = closeOnClickProp ?? tokens.defaults.closeOnClick;
   const safeAreaInsetTop = props.safeAreaInsetTop ?? (position === 'top' ? tokens.defaults.safeAreaInsetTop : false);
   const safeAreaInsetBottom = props.safeAreaInsetBottom ?? (position === 'bottom' ? tokens.defaults.safeAreaInsetBottom : false);
+  const safeTop = !safeAreaInsetTop || position !== 'top' ? paddingVertical : safeAreaPadding.paddingTop;
+  const safeBottom = !safeAreaInsetBottom || position !== 'bottom' ? paddingVertical : safeAreaPadding.paddingBottom;
   const variant = tokens.colors.variants[type];
   const resolvedBackground = background ?? variant.background;
   const resolvedTextColor = color ?? variant.text;
   const resolvedDuration = durationProp ?? tokens.defaults.duration;
-  const topInsetStyle = useMemo(() => ({
-    backgroundColor: resolvedBackground
-  }), [resolvedBackground]);
+
+  // 关键：静态调用时 Notify 初次挂载的 visible=true，需要执行进入动画
   const {
     mounted,
     animated
@@ -55,9 +60,10 @@ export const Notify = props => {
     type: 'notify',
     zIndex
   });
-  const prevVisibleRef = useRef(visible);
-  const closingRef = useRef(false);
-  useEffect(() => {
+  const resolvedZIndex = stackZIndex ?? zIndex;
+  const prevVisibleRef = React.useRef(visible);
+  const closingRef = React.useRef(false);
+  React.useEffect(() => {
     let openedTimer = null;
     if (visible) {
       closingRef.current = false;
@@ -73,13 +79,13 @@ export const Notify = props => {
       if (openedTimer) clearTimeout(openedTimer);
     };
   }, [onOpen, onOpened, tokens.defaults.animationDuration, visible]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (!mounted && closingRef.current) {
       closingRef.current = false;
       onClosed?.();
     }
   }, [mounted, onClosed]);
-  useEffect(() => {
+  React.useEffect(() => {
     let timer = null;
     if (visible && resolvedDuration > 0) {
       timer = setTimeout(() => {
@@ -91,10 +97,10 @@ export const Notify = props => {
     };
   }, [onClose, resolvedDuration, visible]);
   const interactive = closeOnClick || isFunction(onClick);
-  const handlePress = useCallback(() => {
+  const handlePress = () => {
     onClick?.();
     if (closeOnClick) onClose?.();
-  }, [closeOnClick, onClick, onClose]);
+  };
   const accessibilityRole = interactive ? 'button' : 'alert';
   const press = useAriaPress({
     disabled: !interactive,
@@ -104,13 +110,13 @@ export const Notify = props => {
       accessibilityLiveRegion: 'assertive'
     }
   });
-  const [barHeight, setBarHeight] = useState(0);
-  const handleLayout = useCallback(event => {
+  const [barHeight, setBarHeight] = React.useState(0);
+  const handleLayout = event => {
     const height = event.nativeEvent.layout.height;
     if (!height) return;
     setBarHeight(prev => prev === height ? prev : height);
-  }, []);
-  const translateDistance = Math.max(barHeight, tokens.sizing.minHeight);
+  };
+  const translateDistance = barHeight || tokens.sizing.minHeight;
   const translateY = position === 'bottom' ? animated.interpolate({
     inputRange: [0, 1],
     outputRange: [translateDistance, 0]
@@ -120,8 +126,7 @@ export const Notify = props => {
   });
   const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
   if (!mounted) return null;
-  const resolvedZIndex = stackZIndex ?? zIndex;
-  const renderBar = topInsetNode => /*#__PURE__*/React.createElement(Animated.View, {
+  const bar = /*#__PURE__*/React.createElement(Animated.View, {
     testID: "rv-notify-bar",
     accessibilityRole: !interactive ? accessibilityRole : undefined,
     accessibilityLiveRegion: !interactive ? 'assertive' : undefined,
@@ -131,12 +136,14 @@ export const Notify = props => {
       opacity: animated,
       transform: [{
         translateY
-      }]
+      }],
+      paddingTop: position === 'top' ? safeTop : paddingVertical,
+      paddingBottom: position === 'bottom' ? safeBottom : paddingVertical
     }, style]
-  }, topInsetNode, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.content, {
       paddingHorizontal: tokens.spacing.paddingHorizontal,
-      paddingVertical: tokens.spacing.paddingVertical,
+      paddingVertical: 0,
       minHeight: tokens.sizing.minHeight
     }]
   }, hasMessage ? isText(message) ? /*#__PURE__*/React.createElement(Text, {
@@ -145,13 +152,10 @@ export const Notify = props => {
       fontSize: tokens.typography.fontSize,
       lineHeight: tokens.typography.lineHeight
     }, textStyle]
-  }, message) : message : null), safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: tokens.layout.safeArea
-  }));
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(SafeAreaClipProvider, {
-    enabled: safeAreaInsetTop,
-    position: position,
-    topInsetStyle: topInsetStyle,
+  }, message) : message : null));
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+    testID: "rv-notify",
+    pointerEvents: interactive ? 'box-none' : 'none',
     style: [tokens.layout.portal, position === 'bottom' ? {
       bottom: 0
     } : {
@@ -159,20 +163,9 @@ export const Notify = props => {
     }, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
       zIndex: resolvedZIndex
     } : null]
-  }, ({
-    clipTop,
-    topInset
-  }) => {
-    const topInsetNode = clipTop ? null : safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
-      style: tokens.layout.safeArea
-    }) : topInset;
-    return /*#__PURE__*/React.createElement(View, {
-      testID: "rv-notify",
-      pointerEvents: interactive ? 'box-none' : 'none'
-    }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, press.interactionProps, {
-      disabled: !interactive
-    }), renderBar(topInsetNode)) : renderBar(topInsetNode));
-  }));
+  }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, press.interactionProps, {
+    disabled: !interactive
+  }), bar) : bar));
 };
 Notify.displayName = 'Notify';
 export default Notify;

package/dist/es/{notify → components/notify}/imperative.js

@@ -84,7 +84,7 @@ const NotifyPortal = ({
 const showNotify = (input, fallbackType = 'primary') => {
   const opts = mergeOptions(parseOptions(input), fallbackType);
   if (!allowMultiple) {
-    activeKeys.forEach(key => closeNotify(key));
+    Array.from(activeKeys).forEach(key => removeNotify(key));
   }
   const key = Portal.add(null);
   notifyOptions.set(key, opts);

package/dist/es/{number-keyboard → components/number-keyboard}/NumberKeyboard.js

@@ -1,12 +1,13 @@
 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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { nativeDriverEnabled } from '../../platform';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
 import { parseNumberLike } from '../../utils/number';
 import Loading from '../loading';
 import Portal from '../portal/Portal';
+import { SafeAreaView } from '../safe-area-view';
 import { useNumberKeyboardTokens } from './tokens';
 const keyboardRegistry = new Set();
 const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -392,9 +393,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       style: customSidebarStyle
     }, deleteNode, closeNode)) : defaultNode;
     const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-      style: {
-        width: '100%'
-      }
+      edge: "bottom"
     });
     return {
       headerNode,

package/dist/es/{popup → components/popup}/Popup.js

@@ -1,6 +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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Dimensions, Easing, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { Animated, Dimensions, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from '../safe-area-view';
 import { addPopStateListener, nativeDriverEnabled } from '../../platform';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
 import { isRenderable, isText } from '../../utils/validate';
@@ -91,19 +92,15 @@ const renderHeaderNode = (node, options) => {
 };
 const renderWithSafeArea = (children, opts, onSafeAreaTopLayout) => {
   if (opts.safeArea) {
-    return /*#__PURE__*/React.createElement(SafeAreaView, {
-      style: styles.safeAreaView
-    }, children);
+    return /*#__PURE__*/React.createElement(SafeAreaView, null, children);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: [styles.safeInsetTop, {
-      pointerEvents: 'none'
-    }],
-    onLayout: onSafeAreaTopLayout
+    edge: "top",
+    onLayout: onSafeAreaTopLayout,
+    pointerEvents: "none"
   }) : null, children, opts.safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: [styles.safeInsetBottom, {
-      pointerEvents: 'none'
-    }]
+    edge: "bottom",
+    pointerEvents: "none"
   }));
 };
 const hiddenContentStyle = {
@@ -520,15 +517,6 @@ const styles = StyleSheet.create({
   },
   lockLayer: {
     ...StyleSheet.absoluteFillObject
-  },
-  safeAreaView: {
-    width: '100%'
-  },
-  safeInsetTop: {
-    width: '100%'
-  },
-  safeInsetBottom: {
-    width: '100%'
   }
 });
 Popup.displayName = 'Popup';

package/dist/es/components/safe-area-view/SafeAreaView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useSafeAreaPadding } from '../../hooks/useSafeAreaPadding';
+export const SafeAreaView = ({
+  edge,
+  style,
+  children,
+  onLayout,
+  pointerEvents
+}) => {
+  const p = useSafeAreaPadding({});
+  if (edge === 'top') {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: '100%',
+        minHeight: p.paddingTop
+      }, style],
+      onLayout: onLayout,
+      pointerEvents: pointerEvents ?? 'none'
+    });
+  }
+  if (edge === 'bottom') {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: '100%',
+        minHeight: p.paddingBottom
+      }, style],
+      pointerEvents: pointerEvents ?? 'none'
+    });
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      width: '100%',
+      paddingTop: p.paddingTop,
+      paddingBottom: p.paddingBottom,
+      paddingLeft: p.paddingLeft,
+      paddingRight: p.paddingRight
+    }, style],
+    onLayout: onLayout,
+    pointerEvents: pointerEvents
+  }, children);
+};
+SafeAreaView.displayName = 'SafeAreaView';

package/dist/es/components/safe-area-view/index.js

@@ -0,0 +1 @@
+export { SafeAreaView } from './SafeAreaView';

package/dist/es/{tabbar → components/tabbar}/Tabbar.js

@@ -1,9 +1,10 @@
 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, { useCallback, useMemo, useState } from 'react';
-import { SafeAreaView, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
 import { createHairlineBorderTop } from '../../utils/hairline';
+import { SafeAreaView } from '../safe-area-view';
 import { TabbarContext } from './TabbarContext';
 import { useTabbarTokens } from './tokens';
 const TabbarBase = props => {

package/dist/es/{toast → components/toast}/Toast.js

@@ -1,7 +1,8 @@
 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, { useEffect, useRef } from 'react';
-import { Animated, Pressable, SafeAreaView, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { Animated, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import Portal from '../portal/Portal';
+import { SafeAreaView } from '../safe-area-view';
 import { useAriaPress } from '../../hooks';
 import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
 import Loading from '../loading';
@@ -180,9 +181,7 @@ export const Toast = props => {
     onStartShouldSetResponder: () => true,
     onMoveShouldSetResponder: () => true
   }) : null, needsSafeAreaTop && /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: {
-      width: '100%'
-    },
+    edge: "top",
     pointerEvents: "none"
   }), /*#__PURE__*/React.createElement(Pressable, _extends({
     disabled: !closeOnClick
@@ -203,9 +202,7 @@ export const Toast = props => {
       alignItems: 'center'
     }
   }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: {
-      width: '100%'
-    },
+    edge: "bottom",
     pointerEvents: "none"
   })));
 };

package/dist/es/components/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { defaultTokens } from './tokens';
+export const ThemeContext = /*#__PURE__*/React.createContext({
+  foundations: defaultTokens,
+  components: undefined
+});

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

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import { ThemeContext } from './ThemeContext';
+import { createTokens } from './tokens';
+import { isObject } from '../utils/validate';
+const isThemeTokens = value => {
+  return Boolean(isObject(value) && 'palette' in value && 'spacing' in value);
+};
+export const ThemeProvider = ({
+  value,
+  children
+}) => {
+  const resolved = useMemo(() => {
+    const foundations = isThemeTokens(value) ? value : createTokens(value?.foundations);
+    const components = !isThemeTokens(value) ? value?.components : undefined;
+    return {
+      foundations,
+      components
+    };
+  }, [value]);
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: resolved
+  }, children);
+};

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

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { deepMerge } from '../utils/deepMerge';
+import { useTheme } from './useTheme';
+export const createComponentTokensHook = (key, createBaseTokens) => {
+  return overrides => {
+    const {
+      foundations,
+      components
+    } = useTheme();
+    const componentOverrides = components?.[key];
+    return useMemo(() => {
+      const base = createBaseTokens(foundations);
+      const merged = componentOverrides && overrides ? deepMerge(componentOverrides, overrides) : componentOverrides ?? overrides;
+      return merged ? deepMerge(base, merged) : base;
+    }, [componentOverrides, foundations, overrides]);
+  };
+};

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

@@ -0,0 +1,6 @@
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme } from './useTheme';
+export { createComponentTokensHook } from './createComponentTokensHook';
+export { mergeTokensOverride } from './mergeTokensOverride';
+export { createTokens, defaultTokens } from './tokens';
+export { themePresets, getThemePreset } from './presets';

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

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

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

@@ -0,0 +1,140 @@
+import { createTokens, defaultTokens } from './tokens';
+const darkOverrides = {
+  palette: {
+    default: {
+      50: '#05070b',
+      100: '#0b0f16',
+      200: '#131a23',
+      300: '#1c2632',
+      400: '#263342',
+      500: '#35455a',
+      600: '#4b5d73',
+      700: '#5f758c',
+      800: '#7e91a7',
+      900: '#b2c1cf',
+      foreground: '#f4f6fb'
+    },
+    primary: {
+      50: '#141632',
+      100: '#161c49',
+      200: '#152262',
+      300: '#162d88',
+      400: '#1d3ca6',
+      500: '#3055d8',
+      600: '#4c6ef5',
+      700: '#7d93ff',
+      800: '#a8b5ff',
+      900: '#d8e0ff',
+      foreground: '#f6f8ff'
+    },
+    info: {
+      50: '#101a2c',
+      100: '#0f203e',
+      200: '#0d2a55',
+      300: '#12376f',
+      400: '#1d4d9a',
+      500: '#2a66c3',
+      600: '#3f86ec',
+      700: '#69a6ff',
+      800: '#99c3ff',
+      900: '#d7e6ff',
+      foreground: '#f4f8ff'
+    },
+    success: {
+      50: '#07160f',
+      100: '#0b2416',
+      200: '#123221',
+      300: '#15452c',
+      400: '#1d5e3a',
+      500: '#27784a',
+      600: '#32a064',
+      700: '#5ac68f',
+      800: '#8adeb1',
+      900: '#c8f3d9',
+      foreground: '#effff5'
+    },
+    warning: {
+      50: '#2e1405',
+      100: '#3b1b08',
+      200: '#52260c',
+      300: '#6b3311',
+      400: '#8a4416',
+      500: '#ab561c',
+      600: '#cc6a1f',
+      700: '#e78a3a',
+      800: '#f5a85f',
+      900: '#ffd9a8',
+      foreground: '#ffffff'
+    },
+    danger: {
+      50: '#2d090e',
+      100: '#3a0d13',
+      200: '#50121c',
+      300: '#6a1a27',
+      400: '#882434',
+      500: '#a92c40',
+      600: '#cb3750',
+      700: '#ef4b63',
+      800: '#ff7d8f',
+      900: '#ffc6d0',
+      foreground: '#fff5f6'
+    }
+  }
+};
+const auroraOverrides = {
+  palette: {
+    default: {
+      50: '#f4fbff',
+      100: '#e3f5ff',
+      200: '#d1eef9',
+      300: '#b8e1ef',
+      400: '#a2d1e2',
+      500: '#89bbcf',
+      600: '#6ba3b8',
+      700: '#508aa0',
+      800: '#3a6f84',
+      900: '#254a57',
+      foreground: '#0b1d23'
+    },
+    primary: {
+      50: '#e8fbff',
+      100: '#c1f4ff',
+      200: '#96e7ff',
+      300: '#6bdbff',
+      400: '#40cfff',
+      500: '#18b8f2',
+      600: '#1296d3',
+      700: '#0d74ad',
+      800: '#095885',
+      900: '#053658'
+    },
+    success: {
+      50: '#f1fff6',
+      100: '#cff9e3',
+      200: '#a2f0ca',
+      300: '#75e4b1',
+      400: '#45d799',
+      500: '#1dbe80',
+      600: '#129c67',
+      700: '#097852',
+      800: '#05583b',
+      900: '#033427'
+    }
+  },
+  radii: {
+    sm: 8,
+    md: 12,
+    lg: 18
+  },
+  typography: {
+    fontFamily: 'System, "Helvetica Neue", "PingFang SC"',
+    lineHeightMultiplier: 1.25
+  }
+};
+const buildPreset = overrides => createTokens(overrides);
+export const themePresets = {
+  light: defaultTokens,
+  dark: buildPreset(darkOverrides),
+  aurora: buildPreset(auroraOverrides)
+};
+export const getThemePreset = name => themePresets[name];