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

package/dist/es/index-bar/IndexBar.js

@@ -0,0 +1,422 @@
+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, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useControllableValue } from '../../hooks';
+import { isFiniteNumber, isUndefined } from '../../utils/validate';
+import { useIndexBarTokens } from './tokens';
+const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    value,
+    defaultValue,
+    highlightColor,
+    zIndex = 1,
+    sticky = true,
+    stickyOffsetTop = 0,
+    indexList,
+    itemRender,
+    showIndicator = true,
+    indicatorStyle,
+    indexTextStyle,
+    safeAreaInsetTop = false,
+    tokensOverride,
+    onChange,
+    onSelect,
+    style,
+    ...rest
+  } = props;
+  const {
+    colors,
+    layout
+  } = useIndexBarTokens(tokensOverride);
+  const scrollRef = useRef(null);
+  const scrollYRef = useRef(0);
+  const anchorLayouts = useRef(new Map());
+  const anchorOffsetsRef = useRef([]);
+  const indexListHeightRef = useRef(0);
+  const navItemLayoutsRef = useRef(new Map());
+  const navItemOffsetsRef = useRef([]);
+  const draggingIndexRef = useRef(null);
+  const pendingScrollToValueRef = useRef(null);
+  const [interactionIndex, setInteractionIndex] = useState(null);
+  const [stickyVisible, setStickyVisible] = useState(false);
+  const [indicator, setIndicator] = useState({
+    visible: false
+  });
+  const anchors = useMemo(() => {
+    return React.Children.toArray(children).filter(React.isValidElement);
+  }, [children]);
+  const navItems = useMemo(() => {
+    return indexList?.length ? indexList : anchors.map(anchor => anchor.props.index);
+  }, [anchors, indexList]);
+  const firstIndex = navItems[0];
+  const [activeIndex, setActiveIndex] = useControllableValue(props, {
+    defaultValue: isUndefined(firstIndex) ? anchors[0]?.props.index : firstIndex,
+    valuePropName: 'value',
+    defaultValuePropName: 'defaultValue',
+    trigger: 'onChange'
+  });
+  const currentIndex = activeIndex === undefined || activeIndex === null || !navItems.includes(activeIndex) ? firstIndex : activeIndex;
+  const displayIndex = interactionIndex ?? currentIndex;
+  const showIndicatorNow = useCallback(label => {
+    if (!showIndicator) return;
+    setIndicator({
+      visible: true,
+      label
+    });
+  }, [showIndicator]);
+  const hideIndicatorNow = useCallback(() => {
+    if (!showIndicator) return;
+    setIndicator(prev => prev.visible ? {
+      visible: false
+    } : prev);
+  }, [showIndicator]);
+  const scrollToAnchor = useCallback((index, animated) => {
+    const y = anchorLayouts.current.get(index);
+    if (y === undefined) {
+      pendingScrollToValueRef.current = index;
+      return;
+    }
+    scrollRef.current?.scrollTo({
+      y: Math.max(0, y - stickyOffsetTop),
+      animated
+    });
+  }, [stickyOffsetTop]);
+  const handleAnchorLayout = useCallback((index, layoutY) => {
+    anchorLayouts.current.set(index, layoutY);
+    anchorOffsetsRef.current = Array.from(anchorLayouts.current.entries()).map(([key, y]) => ({
+      index: key,
+      y
+    })).sort((a, b) => a.y - b.y);
+    const pending = pendingScrollToValueRef.current;
+    if (pending === null) return;
+    const y = anchorLayouts.current.get(pending);
+    if (y === undefined) return;
+    pendingScrollToValueRef.current = null;
+    scrollRef.current?.scrollTo({
+      y: Math.max(0, y - stickyOffsetTop),
+      animated: false
+    });
+  }, [stickyOffsetTop]);
+  const scrollToIndex = useCallback((index, animated = true) => {
+    scrollToAnchor(index, animated);
+    setActiveIndex(index);
+  }, [scrollToAnchor, setActiveIndex]);
+  useImperativeHandle(ref, () => ({
+    scrollTo: index => scrollToIndex(index, true)
+  }), [scrollToIndex]);
+  const handleScroll = useCallback(event => {
+    const offsetY = event?.nativeEvent?.contentOffset?.y ?? 0;
+    scrollYRef.current = offsetY;
+    const threshold = sticky ? stickyOffsetTop : 0;
+    let nextIndex = currentIndex;
+    const entries = anchorOffsetsRef.current;
+    const targetY = offsetY + threshold + 1;
+    let low = 0;
+    let high = entries.length - 1;
+    let found = null;
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      const entry = entries[mid];
+      if (entry && entry.y <= targetY) {
+        found = entry.index;
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+    if (found !== null) {
+      nextIndex = found;
+    }
+    if (nextIndex !== undefined && nextIndex !== null && nextIndex !== currentIndex) {
+      setActiveIndex(nextIndex);
+    }
+    if (sticky && nextIndex !== undefined && nextIndex !== null) {
+      const y = anchorLayouts.current.get(nextIndex);
+      const nextStickyVisible = y !== undefined && offsetY > Math.max(0, y - stickyOffsetTop);
+      setStickyVisible(prev => prev === nextStickyVisible ? prev : nextStickyVisible);
+    } else {
+      setStickyVisible(prev => prev ? false : prev);
+    }
+  }, [currentIndex, setActiveIndex, sticky, stickyOffsetTop]);
+  useEffect(() => {
+    const valid = new Set(anchors.map(anchor => anchor.props.index));
+    Array.from(anchorLayouts.current.keys()).forEach(key => {
+      if (!valid.has(key)) {
+        anchorLayouts.current.delete(key);
+      }
+    });
+    anchorOffsetsRef.current = Array.from(anchorLayouts.current.entries()).map(([key, y]) => ({
+      index: key,
+      y
+    })).sort((a, b) => a.y - b.y);
+  }, [anchors]);
+  useEffect(() => {
+    const valid = new Set(navItems);
+    Array.from(navItemLayoutsRef.current.keys()).forEach(key => {
+      if (!valid.has(key)) {
+        navItemLayoutsRef.current.delete(key);
+      }
+    });
+    navItemOffsetsRef.current = Array.from(navItemLayoutsRef.current.entries()).map(([key, layoutItem]) => ({
+      index: key,
+      y: layoutItem.y,
+      height: layoutItem.height
+    })).sort((a, b) => a.y - b.y);
+  }, [navItems]);
+  useEffect(() => {
+    if (interactionIndex == null) return;
+    if (!navItems.includes(interactionIndex)) {
+      setInteractionIndex(null);
+    }
+  }, [interactionIndex, navItems]);
+  useEffect(() => {
+    if (value === undefined || value === null) return;
+    const y = anchorLayouts.current.get(value);
+    if (y === undefined) {
+      pendingScrollToValueRef.current = value;
+      return;
+    }
+    const targetY = Math.max(0, y - stickyOffsetTop);
+    if (Math.abs(targetY - scrollYRef.current) < 1) return;
+    scrollRef.current?.scrollTo({
+      y: targetY,
+      animated: true
+    });
+  }, [stickyOffsetTop, value]);
+  const selectIndex = useCallback((index, animated) => {
+    showIndicatorNow(String(index));
+    onSelect?.(index);
+    scrollToIndex(index, animated);
+  }, [onSelect, scrollToIndex, showIndicatorNow]);
+  const handlePressIn = useCallback(index => {
+    setInteractionIndex(index);
+    selectIndex(index, true);
+  }, [selectIndex]);
+  const handlePressOut = useCallback(() => {
+    hideIndicatorNow();
+    setInteractionIndex(null);
+  }, [hideIndicatorNow]);
+  const handleIndexItemLayout = useCallback((index, event) => {
+    const {
+      y,
+      height
+    } = event.nativeEvent.layout;
+    navItemLayoutsRef.current.set(index, {
+      y,
+      height
+    });
+    navItemOffsetsRef.current = Array.from(navItemLayoutsRef.current.entries()).map(([key, layoutItem]) => ({
+      index: key,
+      y: layoutItem.y,
+      height: layoutItem.height
+    })).sort((a, b) => a.y - b.y);
+  }, []);
+  if (anchors.length === 0) {
+    return null;
+  }
+  const highlight = highlightColor ?? colors.activeText;
+  const activeAnchor = anchors.find(anchor => anchor.props.index === displayIndex);
+  const stickyNode = sticky && stickyVisible && activeAnchor ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.sticky, {
+      backgroundColor: colors.stickyBackground,
+      height: layout.stickyHeight
+    }]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.stickyText, {
+      color: highlight
+    }]
+  }, activeAnchor.props.title ?? activeAnchor.props.index)) : null;
+  const indicatorSize = layout.indicatorSize;
+  const indicatorNode = useMemo(() => {
+    if (!showIndicator || !indicator.visible) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.indicator, {
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: indicatorSize / 2,
+        backgroundColor: colors.indicatorBackground,
+        zIndex,
+        transform: [{
+          translateX: -indicatorSize / 2
+        }, {
+          translateY: -indicatorSize / 2
+        }]
+      }, indicatorStyle]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.indicatorText, {
+        color: colors.indicatorText
+      }]
+    }, indicator.label));
+  }, [colors.indicatorBackground, colors.indicatorText, indicator.label, indicator.visible, indicatorSize, indicatorStyle, showIndicator, zIndex]);
+  const pickIndexFromEvent = useCallback(evt => {
+    if (!navItems.length) return null;
+    const locationY = evt?.nativeEvent?.locationY;
+    if (!isFiniteNumber(locationY)) return null;
+    const entries = navItemOffsetsRef.current;
+    if (entries.length) {
+      let picked = null;
+      let minDistance = Number.POSITIVE_INFINITY;
+      entries.forEach(entry => {
+        if (entry.height <= 0) return;
+        const center = entry.y + entry.height / 2;
+        const distance = Math.abs(locationY - center);
+        if (distance < minDistance) {
+          minDistance = distance;
+          picked = entry.index;
+        }
+      });
+      return picked;
+    }
+    const height = indexListHeightRef.current;
+    if (!height) return null;
+    const paddingY = layout.paddingVertical;
+    const contentHeight = Math.max(0, height - paddingY * 2);
+    const itemHeight = contentHeight / navItems.length;
+    if (itemHeight <= 0) return null;
+    const y = locationY - paddingY;
+    const idx = Math.max(0, Math.min(navItems.length - 1, Math.floor(y / itemHeight)));
+    return navItems[idx] || null;
+  }, [layout.paddingVertical, navItems]);
+  const shouldHandleResponder = useCallback(evt => {
+    if (!navItems.length) return false;
+    const locationY = evt?.nativeEvent?.locationY;
+    if (!isFiniteNumber(locationY)) return false;
+    if (navItemOffsetsRef.current.length) return true;
+    return indexListHeightRef.current > 0;
+  }, [navItems.length]);
+  const handleResponderGrant = useCallback(evt => {
+    const picked = pickIndexFromEvent(evt);
+    draggingIndexRef.current = picked;
+    if (picked !== null) {
+      setInteractionIndex(picked);
+      selectIndex(picked, true);
+    }
+  }, [pickIndexFromEvent, selectIndex]);
+  const handleResponderMove = useCallback(evt => {
+    const picked = pickIndexFromEvent(evt);
+    if (picked === null) return;
+    if (picked === draggingIndexRef.current) return;
+    draggingIndexRef.current = picked;
+    setInteractionIndex(picked);
+    selectIndex(picked, false);
+  }, [pickIndexFromEvent, selectIndex]);
+  const handleResponderRelease = useCallback(() => {
+    draggingIndexRef.current = null;
+    hideIndicatorNow();
+    setInteractionIndex(null);
+  }, [hideIndicatorNow]);
+  const StickyWrapper = safeAreaInsetTop ? SafeAreaView : View;
+  const stickyWrapperStyle = [styles.stickyWrapper, {
+    top: stickyOffsetTop,
+    zIndex
+  }];
+  const handleIndexListLayout = useCallback(e => {
+    const {
+      height
+    } = e.nativeEvent.layout;
+    indexListHeightRef.current = height;
+  }, []);
+  const anchorNodes = useMemo(() => anchors.map(anchor => /*#__PURE__*/React.cloneElement(anchor, {
+    key: anchor.key ?? anchor.props.index,
+    active: anchor.props.index === displayIndex,
+    highlightColor: highlight,
+    onLayoutCapture: handleAnchorLayout
+  })), [anchors, displayIndex, handleAnchorLayout, highlight]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    style: [styles.container, style]
+  }), /*#__PURE__*/React.createElement(ScrollView, {
+    ref: scrollRef,
+    onScroll: handleScroll,
+    scrollEventThrottle: 16,
+    showsVerticalScrollIndicator: false
+  }, anchorNodes), sticky && stickyVisible && stickyNode && /*#__PURE__*/React.createElement(StickyWrapper, {
+    style: stickyWrapperStyle
+  }, stickyNode), /*#__PURE__*/React.createElement(View, {
+    testID: "rv-indexbar-nav-list",
+    style: [styles.indexList, {
+      width: layout.indexWidth,
+      paddingVertical: layout.paddingVertical,
+      zIndex
+    }],
+    onLayout: handleIndexListLayout,
+    onStartShouldSetResponder: () => false,
+    onMoveShouldSetResponder: evt => shouldHandleResponder(evt),
+    onStartShouldSetResponderCapture: () => false,
+    onMoveShouldSetResponderCapture: evt => shouldHandleResponder(evt),
+    onResponderGrant: handleResponderGrant,
+    onResponderStart: handleResponderGrant,
+    onResponderMove: handleResponderMove,
+    onResponderRelease: handleResponderRelease,
+    onResponderTerminate: handleResponderRelease
+  }, navItems.map(item => {
+    const isActive = item === displayIndex;
+    const node = itemRender?.(item, isActive);
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: String(item),
+      testID: `rv-indexbar-nav-${String(item)}`,
+      style: styles.indexItem,
+      hitSlop: layout.spacing,
+      onLayout: event => handleIndexItemLayout(item, event),
+      onPress: () => handlePressIn(item),
+      onPressIn: () => handlePressIn(item),
+      onPressOut: handlePressOut
+    }, node ?? /*#__PURE__*/React.createElement(Text, {
+      style: [styles.indexText, {
+        color: isActive ? highlight : colors.text
+      }, indexTextStyle]
+    }, String(item)));
+  })), indicatorNode);
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  indexList: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 2
+  },
+  indexItem: {
+    paddingVertical: 1,
+    paddingHorizontal: 0,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  indexText: {
+    fontSize: 12
+  },
+  indicator: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none'
+  },
+  indicatorText: {
+    fontSize: 18,
+    fontWeight: '600'
+  },
+  stickyWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  sticky: {
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  stickyText: {
+    fontSize: 14,
+    fontWeight: '600'
+  }
+});
+IndexBarBase.displayName = 'IndexBar';
+export default IndexBarBase;

package/dist/es/index-bar/index.js

@@ -0,0 +1,7 @@
+import IndexBarBase from './IndexBar';
+import IndexAnchor from './IndexAnchor';
+export { useIndexBarTokens } from './tokens';
+const IndexBar = IndexBarBase;
+IndexBar.Anchor = IndexAnchor;
+export { IndexAnchor };
+export default IndexBar;

package/dist/es/index-bar/tokens.js

@@ -0,0 +1,30 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  return {
+    colors: {
+      text: palette.default[600],
+      activeText: palette.primary[600],
+      indicatorBackground: 'rgba(0,0,0,0.6)',
+      indicatorText: onPrimary,
+      stickyBackground: '#ffffff',
+      stickyText: palette.default[900],
+      anchorBackground: '#ffffff',
+      anchorText: palette.default[900],
+      border: palette.default[200]
+    },
+    layout: {
+      indexWidth: 24,
+      indicatorSize: 60,
+      stickyHeight: 32,
+      paddingVertical: spacing.sm,
+      spacing: 4,
+      anchorHeight: 32
+    }
+  };
+};
+export const useIndexBarTokens = createComponentTokensHook('indexBar', createTokens);

package/dist/es/index.js

@@ -0,0 +1,73 @@
+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 { 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/input/Input.js

@@ -0,0 +1,93 @@
+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, useImperativeHandle, useMemo, useRef } from 'react';
+import { isBoolean, isFiniteNumber } from '../../utils/validate';
+import Field from '../field';
+import { useFieldTokens } from '../field/tokens';
+import { useInputTokens } from './tokens';
+const InputComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    type,
+    keyboardType: keyboardTypeProp,
+    align,
+    inputAlign: inputAlignProp,
+    clearTrigger: clearTriggerOverride,
+    onChange,
+    onChangeText,
+    showWordLimit,
+    style,
+    fieldTokensOverride,
+    tokensOverride,
+    ...rest
+  } = props;
+  const tokens = useInputTokens(tokensOverride);
+  const inputRef = useRef(null);
+  const handleChangeText = useCallback(value => {
+    onChange?.(value);
+    onChangeText?.(value);
+  }, [onChange, onChangeText]);
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus?.(),
+    blur: () => inputRef.current?.blur?.(),
+    clear: () => inputRef.current?.clear?.(),
+    get nativeElement() {
+      return inputRef.current?.nativeElement ?? null;
+    }
+  }), []);
+  const resolvedInputAlign = useMemo(() => align ?? inputAlignProp ?? tokens.defaults.inputAlign, [align, inputAlignProp, tokens.defaults.inputAlign]);
+  const resolvedClearTrigger = useMemo(() => clearTriggerOverride ?? tokens.defaults.clearTrigger, [clearTriggerOverride, tokens.defaults.clearTrigger]);
+  const resolvedKeyboardType = useMemo(() => keyboardTypeProp ?? (type === 'number' ? 'decimal-pad' : undefined), [keyboardTypeProp, type]);
+  const fieldStyle = useMemo(() => [{
+    paddingHorizontal: tokens.spacing.paddingHorizontal,
+    paddingVertical: tokens.spacing.paddingVertical,
+    backgroundColor: tokens.colors.background
+  }, style], [style, tokens.colors.background, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
+  return /*#__PURE__*/React.createElement(Field, _extends({
+    ref: inputRef
+  }, rest, {
+    type: type,
+    keyboardType: resolvedKeyboardType,
+    tokensOverride: fieldTokensOverride,
+    border: tokens.defaults.border,
+    inputAlign: resolvedInputAlign,
+    clearTrigger: resolvedClearTrigger,
+    style: fieldStyle,
+    showWordLimit: showWordLimit,
+    onChangeText: handleChangeText
+  }));
+});
+InputComponent.displayName = 'Input';
+const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    autoSize,
+    ...rest
+  } = props;
+  const fieldTokens = useFieldTokens(rest.fieldTokensOverride);
+  const lineHeight = fieldTokens.defaults.textareaLineHeight;
+  const toRows = useCallback(height => {
+    if (!isFiniteNumber(height) || height <= 0) return undefined;
+    return Math.max(1, Math.round(height / lineHeight));
+  }, [lineHeight]);
+  const resolvedAutoSize = useMemo(() => {
+    if (!autoSize || isBoolean(autoSize)) {
+      return autoSize;
+    }
+    const minRows = toRows(autoSize.minHeight);
+    const maxRows = toRows(autoSize.maxHeight);
+    return minRows || maxRows ? {
+      minRows,
+      maxRows
+    } : undefined;
+  }, [autoSize, toRows]);
+  return /*#__PURE__*/React.createElement(InputComponent, _extends({
+    ref: ref
+  }, rest, {
+    type: "textarea",
+    autoSize: resolvedAutoSize
+  }));
+});
+TextArea.displayName = 'Input.TextArea';
+const Input = Object.assign(InputComponent, {
+  TextArea
+});
+export default Input;
+export { TextArea };

package/dist/es/input/index.js

@@ -0,0 +1,3 @@
+import Input from './Input';
+export default Input;
+export { TextArea } from './Input';

package/dist/es/input/tokens.js

@@ -0,0 +1,16 @@
+import { createComponentTokensHook } from '../../design-system';
+const createInputTokens = foundations => ({
+  defaults: {
+    inputAlign: 'left',
+    clearTrigger: 'focus',
+    border: true
+  },
+  spacing: {
+    paddingHorizontal: foundations.spacing.md,
+    paddingVertical: foundations.spacing.sm
+  },
+  colors: {
+    background: 'transparent'
+  }
+});
+export const useInputTokens = createComponentTokensHook('input', createInputTokens);