react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/toast/Toast.js

@@ -0,0 +1,231 @@
+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 Portal from '../portal/Portal';
+import { useAriaPress } from '../../hooks';
+import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
+import Loading from '../loading';
+import { Checked, Close } from 'react-native-system-icon';
+import { useOverlayStack } from '../overlay';
+import { isFiniteNumber, isText } from '../../utils/validate';
+import { useToastTokens } from './tokens';
+export const Toast = props => {
+  const {
+    visible,
+    message,
+    icon,
+    type = 'info',
+    iconSize,
+    loadingType = 'circular',
+    duration = 2000,
+    position = 'middle',
+    forbidClick = false,
+    overlay = false,
+    overlayStyle,
+    closeOnClickOverlay = false,
+    closeOnClick = false,
+    loadingIndicator,
+    safeAreaInsetTop: safeAreaInsetTopProp,
+    safeAreaInsetBottom: safeAreaInsetBottomProp,
+    tokensOverride,
+    style,
+    textStyle,
+    onClose,
+    onOpen,
+    onOpened,
+    onClosed
+  } = props;
+  const tokens = useToastTokens(tokensOverride);
+  const {
+    colors
+  } = tokens;
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const durationMs = isFiniteNumber(duration) ? Math.max(0, duration) : 0;
+  const {
+    mounted,
+    animated
+  } = usePresenceAnimation(visible, {
+    duration: tokens.animationDuration
+  });
+  const {
+    zIndex: stackZIndex
+  } = useOverlayStack({
+    visible: mounted,
+    type: 'toast'
+  });
+  const prevVisibleRef = useRef(visible);
+  const closingRef = useRef(false);
+  const positionOffset = windowHeight > 0 ? Math.round(windowHeight * 0.2) : 60;
+  const needsSafeAreaTop = safeAreaInsetTopProp !== undefined ? safeAreaInsetTopProp : position === 'top';
+  const needsSafeAreaBottom = safeAreaInsetBottomProp !== undefined ? safeAreaInsetBottomProp : position === 'bottom';
+  const positionStyle = position === 'top' ? {
+    justifyContent: 'flex-start',
+    paddingTop: positionOffset
+  } : position === 'bottom' ? {
+    justifyContent: 'flex-end',
+    paddingBottom: positionOffset
+  } : {
+    justifyContent: 'center'
+  };
+  useEffect(() => {
+    let timer = null;
+    if (visible) {
+      if (durationMs > 0) {
+        timer = setTimeout(() => {
+          onClose?.();
+        }, durationMs);
+      }
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [durationMs, onClose, visible]);
+  useEffect(() => {
+    let openedTimer = null;
+    if (visible) {
+      closingRef.current = false;
+      if (!prevVisibleRef.current) {
+        onOpen?.();
+        if (onOpened) {
+          openedTimer = setTimeout(onOpened, tokens.animationDuration);
+        }
+      }
+    } else if (prevVisibleRef.current) {
+      closingRef.current = true;
+    }
+    prevVisibleRef.current = visible;
+    return () => {
+      if (openedTimer) clearTimeout(openedTimer);
+    };
+  }, [onOpen, onOpened, tokens.animationDuration, visible]);
+  useEffect(() => {
+    if (!mounted && closingRef.current) {
+      closingRef.current = false;
+      onClosed?.();
+    }
+  }, [mounted, onClosed]);
+  const handleClose = () => {
+    onClose?.();
+  };
+  const toastPress = useAriaPress({
+    disabled: !closeOnClick,
+    onPress: handleClose,
+    extraProps: {
+      accessibilityRole: closeOnClick ? 'button' : 'alert',
+      accessibilityHint: closeOnClick ? '双击关闭提示' : undefined,
+      accessibilityLiveRegion: 'assertive'
+    }
+  });
+  const renderIcon = () => {
+    if (icon) return icon;
+    const resolvedIconSize = iconSize ?? tokens.iconSize;
+    switch (type) {
+      case 'success':
+        return /*#__PURE__*/React.createElement(Checked, {
+          size: resolvedIconSize,
+          fill: colors.text,
+          color: colors.text
+        });
+      case 'fail':
+        return /*#__PURE__*/React.createElement(Close, {
+          size: resolvedIconSize,
+          fill: colors.text,
+          color: colors.text
+        });
+      case 'loading':
+        return loadingIndicator ?? /*#__PURE__*/React.createElement(Loading, {
+          type: loadingType,
+          color: colors.text,
+          size: resolvedIconSize
+        });
+      default:
+        return null;
+    }
+  };
+  const iconNode = renderIcon();
+  const isTextToast = type === 'info' && !iconNode;
+  const boxStyle = isTextToast ? {
+    minWidth: tokens.textMinWidth,
+    minHeight: 0,
+    paddingVertical: tokens.textPaddingVertical,
+    paddingHorizontal: tokens.textPaddingHorizontal
+  } : {
+    minWidth: tokens.defaultWidth,
+    minHeight: tokens.defaultMinHeight,
+    padding: tokens.defaultPadding
+  };
+  const toastStyle = {
+    borderRadius: tokens.radius,
+    opacity: closeOnClick && toastPress.states.pressed ? 0.85 : animated,
+    backgroundColor: tokens.colors.variants[type],
+    maxWidth: tokens.maxWidth,
+    ...boxStyle
+  };
+  if (!mounted) return null;
+  const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+    style: [styles.backdrop, positionStyle, stackZIndex ? {
+      zIndex: stackZIndex
+    } : undefined],
+    pointerEvents: forbidClick || overlay || closeOnClick ? 'auto' : 'none'
+  }, overlay || forbidClick ? /*#__PURE__*/React.createElement(Pressable, {
+    testID: "rv-toast-overlay",
+    style: [styles.overlay, overlay && {
+      backgroundColor: colors.backdrop
+    }, overlayStyle],
+    pointerEvents: "auto",
+    onPress: overlay && closeOnClickOverlay ? handleClose : undefined,
+    onStartShouldSetResponder: () => true,
+    onMoveShouldSetResponder: () => true
+  }) : null, needsSafeAreaTop && /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      width: '100%'
+    },
+    pointerEvents: "none"
+  }), /*#__PURE__*/React.createElement(Pressable, _extends({
+    disabled: !closeOnClick
+  }, toastPress.interactionProps), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.toast, toastStyle, style]
+  }, iconNode ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginBottom: tokens.gap
+    }
+  }, iconNode) : null, hasMessage ? isText(message) ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.message, {
+      color: colors.text,
+      fontSize: tokens.fontSize,
+      lineHeight: tokens.lineHeight
+    }, textStyle]
+  }, message) : /*#__PURE__*/React.createElement(View, {
+    style: {
+      alignItems: 'center'
+    }
+  }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      width: '100%'
+    },
+    pointerEvents: "none"
+  })));
+};
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: 'transparent'
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent'
+  },
+  toast: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  }
+});
+Toast.displayName = 'Toast';
+export default Toast;

package/dist/es/toast/imperative.js

@@ -0,0 +1,155 @@
+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, useState } from 'react';
+import Portal from '../portal/Portal';
+import { isFunction, isString, isText } from '../../utils';
+import Toast from './Toast';
+const activeKeys = new Set();
+const toastOptions = new Map();
+const toastControllers = new Map();
+let allowMultiple = false;
+const baseOptions = {
+  type: 'info',
+  position: 'middle',
+  forbidClick: false,
+  overlay: false
+};
+let currentOptions = {
+  ...baseOptions
+};
+const typeDefaults = new Map();
+const parseOptions = input => {
+  if (/*#__PURE__*/React.isValidElement(input) || isText(input)) {
+    return {
+      message: input
+    };
+  }
+  return input ?? {};
+};
+const mergeOptions = (input, fallbackType) => {
+  const type = input.type ?? fallbackType;
+  const base = {
+    ...currentOptions,
+    ...typeDefaults.get(type)
+  };
+  const merged = {
+    ...base,
+    ...input,
+    type
+  };
+  if (merged.duration === undefined || merged.duration === null) {
+    merged.duration = base.duration ?? 2000;
+  }
+  return merged;
+};
+const removeToast = key => {
+  Portal.remove(key);
+  activeKeys.delete(key);
+  toastOptions.delete(key);
+  toastControllers.delete(key);
+};
+const closeToast = key => {
+  const controller = toastControllers.get(key);
+  if (controller) {
+    controller.close();
+  } else {
+    removeToast(key);
+  }
+};
+const ToastPortal = ({
+  id,
+  options
+}) => {
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    toastControllers.set(id, {
+      close: () => setVisible(false)
+    });
+    return () => {
+      toastControllers.delete(id);
+    };
+  }, [id]);
+  const handleClose = useCallback(() => {
+    options.onClose?.();
+    setVisible(false);
+  }, [options]);
+  const handleClosed = useCallback(() => {
+    options.onClosed?.();
+    removeToast(id);
+  }, [id, options]);
+  return /*#__PURE__*/React.createElement(Toast, _extends({}, options, {
+    visible: visible,
+    onClose: handleClose,
+    onClosed: handleClosed
+  }));
+};
+const showToast = (input, fallbackType = 'info') => {
+  const opts = mergeOptions(parseOptions(input), fallbackType);
+  if (!allowMultiple) {
+    activeKeys.forEach(key => closeToast(key));
+  }
+  const key = Portal.add(null);
+  toastOptions.set(key, opts);
+  Portal.update(key, /*#__PURE__*/React.createElement(ToastPortal, {
+    id: key,
+    options: opts
+  }));
+  activeKeys.add(key);
+  const config = next => {
+    const prev = toastOptions.get(key);
+    if (!prev) return;
+    const nextInput = isFunction(next) ? next(prev) : next;
+    const parsed = parseOptions(nextInput);
+    const nextType = parsed.type ?? prev.type ?? fallbackType;
+    const merged = {
+      ...prev,
+      ...parsed,
+      type: nextType
+    };
+    if ('duration' in parsed && (parsed.duration === undefined || parsed.duration === null)) {
+      merged.duration = typeDefaults.get(nextType)?.duration ?? currentOptions.duration ?? baseOptions.duration ?? 2000;
+    }
+    toastOptions.set(key, merged);
+    Portal.update(key, /*#__PURE__*/React.createElement(ToastPortal, {
+      id: key,
+      options: merged
+    }));
+  };
+  return {
+    clear: () => closeToast(key),
+    update: next => config(next),
+    config
+  };
+};
+export const ToastImperative = {
+  show: options => showToast(options),
+  info: options => showToast(options, 'info'),
+  success: options => showToast(options, 'success'),
+  fail: options => showToast(options, 'fail'),
+  loading: options => showToast(options, 'loading'),
+  clear: () => {
+    activeKeys.forEach(key => closeToast(key));
+  },
+  allowMultiple: (value = true) => {
+    allowMultiple = value;
+  },
+  setDefaultOptions: (typeOrOptions, options) => {
+    if (isString(typeOrOptions)) {
+      typeDefaults.set(typeOrOptions, options ?? {});
+    } else {
+      currentOptions = {
+        ...currentOptions,
+        ...typeOrOptions
+      };
+    }
+  },
+  resetDefaultOptions: type => {
+    if (type) {
+      typeDefaults.delete(type);
+    } else {
+      currentOptions = {
+        ...baseOptions
+      };
+      typeDefaults.clear();
+    }
+  }
+};

package/dist/es/toast/index.js

@@ -0,0 +1,5 @@
+import { Toast as ToastComponent } from './Toast';
+import { ToastImperative } from './imperative';
+const Toast = Object.assign(ToastComponent, ToastImperative);
+export default Toast;
+export { Toast };

package/dist/es/toast/tokens.js

@@ -0,0 +1,31 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createToastTokens = foundations => {
+  const onDarkText = foundations.palette.primary.foreground ?? '#ffffff';
+  const backdrop = 'rgba(0,0,0,0.7)';
+  return {
+    colors: {
+      text: onDarkText,
+      backdrop,
+      variants: {
+        info: backdrop,
+        success: backdrop,
+        fail: backdrop,
+        loading: backdrop
+      }
+    },
+    fontSize: foundations.fontSize.sm,
+    lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier),
+    radius: foundations.radii.md,
+    gap: foundations.spacing.sm,
+    iconSize: 36,
+    maxWidth: '70%',
+    textMinWidth: 96,
+    textPaddingVertical: foundations.spacing.sm,
+    textPaddingHorizontal: foundations.spacing.md,
+    defaultPadding: foundations.spacing.lg,
+    defaultWidth: 88,
+    defaultMinHeight: 88,
+    animationDuration: 160
+  };
+};
+export const useToastTokens = createComponentTokensHook('toast', createToastTokens);

package/dist/es/types.js

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

package/dist/es/typography/Typography.js

@@ -0,0 +1,175 @@
+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 { Linking, Text, View } from 'react-native';
+import { isBoolean, isNumber, isPlainObject } from '../../utils';
+import { isWeb as isWebPlatform } from '../../platform';
+import { useTypographyTokens } from './tokens';
+const FLEX_SHRINK_STYLE = {
+  flexShrink: 1
+};
+const resolveEllipsisRows = ellipsis => {
+  if (!ellipsis) return undefined;
+  if (isBoolean(ellipsis)) return ellipsis ? 1 : undefined;
+  if (isNumber(ellipsis)) return ellipsis;
+  return ellipsis.rows ?? 1;
+};
+const hasTypographyColorKey = (colors, key) => Object.prototype.hasOwnProperty.call(colors, key);
+const isEllipsisObject = ellipsis => isPlainObject(ellipsis);
+const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    tokensOverride,
+    children,
+    type: typeProp,
+    color: colorProp,
+    size: sizeProp,
+    level,
+    disabled: disabledProp,
+    delete: deleted,
+    underline,
+    center,
+    strong,
+    ellipsis,
+    style,
+    onPress,
+    ...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 ellipsisRows = resolveEllipsisRows(ellipsis);
+  const ellipsisConfig = isEllipsisObject(ellipsis) ? ellipsis : undefined;
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const isWeb = isWebPlatform();
+  const handleTextLayout = useCallback(event => {
+    if (!ellipsisRows || expanded) return;
+    const exceeded = event.nativeEvent.lines.length > ellipsisRows;
+    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;
+  }
+  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 baseStyle = useMemo(() => {
+    const textDecorationLine = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
+    const computedStyle = {
+      color: resolvedColor,
+      fontSize,
+      lineHeight,
+      fontFamily: tokens.typography.fontFamily,
+      fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
+      includeFontPadding: false,
+      textDecorationLine,
+      textAlign: center ? 'center' : undefined,
+      opacity: disabled ? tokens.opacity.disabled : 1
+    };
+    return [computedStyle, style];
+  }, [resolvedColor, fontSize, lineHeight, tokens.typography.fontFamily, tokens.opacity.disabled, tokens.typography.weight.regular, tokens.typography.weight.strong, strong, center, disabled, underline, deleted, style]);
+  const hasActionText = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
+  const shouldShowAction = hasActionText && (isTruncated || expanded || isWeb);
+  const handleToggleEllipsis = useCallback(() => {
+    if (!ellipsisConfig) return;
+    setExpanded(prev => {
+      const next = !prev;
+      ellipsisConfig.onExpand?.(next);
+      return next;
+    });
+  }, [ellipsisConfig]);
+  const actionLabel = useMemo(() => {
+    if (!ellipsisConfig) return undefined;
+    return expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
+  }, [ellipsisConfig, expanded]);
+  const actionTextStyle = useMemo(() => ({
+    color: tokens.colors.primary,
+    fontSize: tokens.sizing.sizes.sm,
+    fontWeight: tokens.typography.weight.medium,
+    marginLeft: tokens.sizing.actionMarginLeft,
+    includeFontPadding: false
+  }), [tokens.colors.primary, tokens.sizing.sizes.sm, tokens.typography.weight.medium, tokens.sizing.actionMarginLeft]);
+  const textStyle = useMemo(() => {
+    if (!shouldShowAction) return baseStyle;
+    return [baseStyle, FLEX_SHRINK_STYLE];
+  }, [shouldShowAction, 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
+  }, textProps), children);
+  if (!shouldShowAction) {
+    return center ? /*#__PURE__*/React.createElement(View, {
+      style: tokens.layout.centerWrapper
+    }, textNode) : textNode;
+  }
+  const actionNode = /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.actionRow
+  }, textNode, /*#__PURE__*/React.createElement(Text, {
+    onPress: handleToggleEllipsis,
+    suppressHighlighting: true,
+    style: actionTextStyle
+  }, actionLabel));
+  return center ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.centerWrapper
+  }, actionNode) : actionNode;
+});
+TypographyTextBaseInner.displayName = 'TypographyText';
+const TypographyTextBase = /*#__PURE__*/React.memo(TypographyTextBaseInner);
+TypographyTextBase.displayName = 'TypographyText';
+const TypographyTitle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    level = 5,
+    accessibilityRole,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(TypographyTextBase, _extends({
+    ref: ref,
+    level: level,
+    accessibilityRole: accessibilityRole ?? 'header'
+  }, rest));
+});
+TypographyTitle.displayName = 'TypographyTitle';
+const TypographyLink = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    href,
+    onPress,
+    underline = true,
+    type = 'primary',
+    accessibilityRole,
+    ...rest
+  } = props;
+  const handlePress = useCallback(async event => {
+    if (onPress) {
+      onPress(event);
+      return;
+    }
+    if (href) {
+      try {
+        await Linking.openURL(href);
+      } catch (error) {
+        if (typeof __DEV__ !== 'undefined' && __DEV__) {
+          console.warn('[Typography.Link] Failed to open url', error);
+        }
+      }
+    }
+  }, [onPress, href]);
+  return /*#__PURE__*/React.createElement(TypographyTextBase, _extends({
+    ref: ref,
+    underline: underline,
+    type: type,
+    onPress: handlePress,
+    accessibilityRole: accessibilityRole ?? 'link'
+  }, rest));
+});
+TypographyLink.displayName = 'TypographyLink';
+export const Typography = Object.assign(TypographyTextBase, {
+  Text: TypographyTextBase,
+  Title: TypographyTitle,
+  Link: TypographyLink
+});
+export default Typography;

package/dist/es/typography/index.js

@@ -0,0 +1,2 @@
+import Typography from './Typography';
+export default Typography;

package/dist/es/typography/tokens.js

@@ -0,0 +1,82 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTypographyTokens = ({
+  palette,
+  fontSize,
+  typography,
+  opacity
+}) => ({
+  defaults: {
+    type: 'default',
+    size: 'md',
+    disabled: false
+  },
+  layout: {
+    centerWrapper: {
+      alignItems: 'center'
+    },
+    actionRow: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'baseline'
+    }
+  },
+  colors: {
+    default: palette.default[700],
+    primary: palette.primary[500],
+    success: palette.success[500],
+    warning: palette.warning[500],
+    danger: palette.danger[500],
+    secondary: palette.default[500],
+    light: palette.default[300]
+  },
+  sizing: {
+    sizes: {
+      xs: fontSize.xs,
+      sm: fontSize.sm,
+      md: fontSize.md,
+      lg: fontSize.lg,
+      xl: fontSize.xl,
+      xxl: fontSize.xl * 1.2
+    },
+    titles: {
+      1: {
+        fontSize: 30,
+        lineHeight: 34
+      },
+      2: {
+        fontSize: 26,
+        lineHeight: 30
+      },
+      3: {
+        fontSize: 22,
+        lineHeight: 26
+      },
+      4: {
+        fontSize: 20,
+        lineHeight: 24
+      },
+      5: {
+        fontSize: 16,
+        lineHeight: 20
+      },
+      6: {
+        fontSize: 14,
+        lineHeight: 18
+      }
+    },
+    lineHeightMultiplier: 1.3,
+    actionMarginLeft: 4
+  },
+  typography: {
+    fontFamily: typography.fontFamily,
+    weight: {
+      regular: typography.weight.regular,
+      medium: typography.weight.medium,
+      strong: typography.weight.semiBold
+    }
+  },
+  opacity: {
+    disabled: opacity.disabled
+  }
+});
+export const useTypographyTokens = createComponentTokensHook('typography', createTypographyTokens);