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

package/dist/cjs/form/FormItem.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormItem = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _FormContext = require("./FormContext");
+var _utils2 = require("./utils");
+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 EMPTY_RULES = [];
+const FormItem = ({
+  name,
+  label,
+  description,
+  intro,
+  tooltip,
+  rules,
+  dependencies,
+  valuePropName = 'value',
+  trigger = 'onChangeText',
+  validateTrigger,
+  showValidateMessage,
+  required,
+  shouldUpdate,
+  initialValue,
+  children
+}) => {
+  const renderProps = typeof children === 'function';
+  const context = (0, _react().useContext)(_FormContext.FormContext);
+  if (!context) {
+    if (renderProps) {
+      return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children({
+        getFieldValue: () => undefined,
+        getFieldsValue: () => ({}),
+        form: null
+      }));
+    }
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
+  }
+  const normalizedRules = rules ?? EMPTY_RULES;
+  const prevValuesRef = (0, _react().useRef)(context.values);
+  (0, _react().useEffect)(() => {
+    prevValuesRef.current = context.values;
+  }, [context.values]);
+  const shouldRender = !shouldUpdate || shouldUpdate(prevValuesRef.current, context.values);
+  (0, _react().useEffect)(() => {
+    if (!name) return undefined;
+    return context.registerField(name, {
+      rules: normalizedRules,
+      dependencies,
+      initialValue,
+      validateTrigger: validateTrigger ?? trigger
+    });
+  }, [context.registerField, name, normalizedRules, dependencies, initialValue, validateTrigger, trigger]);
+  const mergedValue = name ? context.getFieldValue(name) : undefined;
+  const mergedShowMessage = showValidateMessage ?? context.showValidateMessage ?? true;
+  const fieldErrors = name ? context.getFieldError(name) : undefined;
+  const firstError = mergedShowMessage ? fieldErrors?.[0] : undefined;
+  const mergedRequired = required ?? normalizedRules.some(rule => rule.required);
+  const mergedValidateTriggers = (0, _utils2.normalizeTrigger)(validateTrigger ?? trigger);
+  if (renderProps) {
+    if (!shouldRender) return null;
+    const node = children({
+      getFieldValue: context.getFieldValue,
+      getFieldsValue: context.getFieldsValue,
+      form: context.form || null
+    });
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, node);
+  }
+  if (!name) {
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
+  }
+  if (!shouldRender) return null;
+  const childArray = _react().default.Children.toArray(children);
+  if (childArray.length !== 1) {
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
+  }
+  const child = childArray[0];
+  const handleChange = next => {
+    context.setFieldValue(name, next, trigger);
+    const original = child.props[trigger];
+    if ((0, _utils.isFunction)(original)) {
+      original(next);
+    }
+  };
+  const isFieldLike = (() => {
+    const displayName = child.type.displayName;
+    return (0, _utils.isString)(displayName) && (displayName.includes('Field') || displayName.includes('Input'));
+  })();
+  const resolveValue = () => {
+    const childValue = child.props[valuePropName];
+    if (childValue !== undefined) return childValue;
+    if (mergedValue !== undefined) return mergedValue;
+    if (isFieldLike && valuePropName === 'value') return '';
+    return mergedValue;
+  };
+  const injectedProps = {
+    [valuePropName]: resolveValue(),
+    [trigger]: handleChange
+  };
+  mergedValidateTriggers.forEach(eventName => {
+    if (!eventName || eventName === trigger) return;
+    const original = child.props[eventName];
+    injectedProps[eventName] = (...args) => {
+      if ((0, _utils.isFunction)(original)) {
+        original(...args);
+      }
+      context.validateField(name, eventName);
+    };
+  });
+  if (label !== undefined && child.props.label === undefined) {
+    injectedProps.label = label;
+  }
+  if (context.colon !== undefined && injectedProps.label !== undefined && child.props.colon === undefined) {
+    injectedProps.colon = context.colon;
+  }
+  if (context.labelWidth !== undefined && child.props.labelWidth === undefined) {
+    injectedProps.labelWidth = context.labelWidth;
+  }
+  if (description && child.props.description === undefined) {
+    injectedProps.description = description;
+  }
+  if (intro && child.props.intro === undefined) {
+    injectedProps.intro = intro;
+  }
+  if (tooltip && child.props.tooltip === undefined) {
+    injectedProps.tooltip = tooltip;
+  }
+  if (mergedRequired && child.props.required === undefined) {
+    injectedProps.required = true;
+  }
+  if (firstError && child.props.errorMessage === undefined) {
+    injectedProps.error = true;
+    injectedProps.errorMessage = firstError;
+  }
+  return /*#__PURE__*/_react().default.cloneElement(child, injectedProps);
+};
+exports.FormItem = FormItem;
+FormItem.displayName = 'FormItem';

package/dist/cjs/form/FormList.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormList = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _FormContext = require("./FormContext");
+var _utils = require("./utils");
+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 FormList = ({
+  name,
+  initialValue,
+  children
+}) => {
+  const context = (0, _react().useContext)(_FormContext.FormContext);
+  const keyRef = (0, _react().useRef)(0);
+  const ensureInitial = (0, _react().useCallback)(() => {
+    if (!context) return;
+    const current = (0, _utils.getValueByName)(context.values, name);
+    if (current === undefined && initialValue !== undefined) {
+      context.setFieldValue(name, initialValue);
+    }
+  }, [context, initialValue, name]);
+  (0, _react().useEffect)(() => {
+    ensureInitial();
+  }, [ensureInitial]);
+  if (!context) {
+    return null;
+  }
+  const listValueRaw = (0, _utils.getValueByName)(context.values, name);
+  const listValue = Array.isArray(listValueRaw) ? listValueRaw : [];
+  const fields = listValue.map((_, index) => ({
+    name: index,
+    key: keyRef.current + index,
+    isListField: true
+  }));
+  const add = (defaultValue, index) => {
+    const insertIndex = typeof index === 'number' ? index : listValue.length;
+    const next = [...listValue];
+    next.splice(insertIndex, 0, defaultValue);
+    context.setFieldValue(name, next);
+    keyRef.current += 1;
+  };
+  const remove = index => {
+    if (index < 0 || index >= listValue.length) return;
+    const next = listValue.slice(0, index).concat(listValue.slice(index + 1));
+    context.setFieldValue(name, next);
+  };
+  const move = (from, to) => {
+    if (from === to || from < 0 || to < 0 || from >= listValue.length || to >= listValue.length) return;
+    const next = [...listValue];
+    const item = next.splice(from, 1)[0];
+    next.splice(to, 0, item);
+    context.setFieldValue(name, next);
+  };
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children(fields, {
+    add,
+    remove,
+    move
+  }));
+};
+exports.FormList = FormList;
+FormList.displayName = 'Form.List';

package/dist/cjs/form/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = void 0;
+Object.defineProperty(exports, "FormItem", {
+  enumerable: true,
+  get: function () {
+    return _FormItem.FormItem;
+  }
+});
+Object.defineProperty(exports, "FormList", {
+  enumerable: true,
+  get: function () {
+    return _FormList.FormList;
+  }
+});
+Object.defineProperty(exports, "FormSubscribe", {
+  enumerable: true,
+  get: function () {
+    return _Form.FormSubscribe;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useWatch", {
+  enumerable: true,
+  get: function () {
+    return _Form.useWatch;
+  }
+});
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _Form = _interopRequireWildcard(require("./Form"));
+var _FormItem = require("./FormItem");
+var _FormList = require("./FormList");
+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 Form = exports.Form = Object.assign(_Form.default, {
+  Item: _FormItem.FormItem,
+  List: _FormList.FormList,
+  useForm: () => (0, _react().useRef)(null),
+  Subscribe: _Form.FormSubscribe,
+  useWatch: _Form.useWatch
+});
+var _default = exports.default = Form;

package/dist/cjs/form/utils.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toNamePath = exports.setValueByName = exports.serializeNamePath = exports.normalizeTrigger = exports.getValueByName = void 0;
+var _utils = require("../../utils");
+const normalizeTrigger = trigger => trigger ? Array.isArray(trigger) ? trigger : [trigger] : [];
+exports.normalizeTrigger = normalizeTrigger;
+const toNamePath = name => {
+  if (name === undefined || name === null) return [];
+  if (Array.isArray(name)) return name;
+  if ((0, _utils.isNumber)(name)) return [name];
+  if ((0, _utils.isString)(name)) {
+    return name.split('.');
+  }
+  return [String(name)];
+};
+exports.toNamePath = toNamePath;
+const serializeNamePath = name => {
+  const path = toNamePath(name);
+  return path.join('.');
+};
+exports.serializeNamePath = serializeNamePath;
+const getValueByName = (source, name) => {
+  const path = toNamePath(name);
+  return path.reduce((acc, key) => {
+    if (acc == null) return acc;
+    const keyStr = String(key);
+    if (Array.isArray(acc)) {
+      const index = Number(keyStr);
+      return Number.isFinite(index) ? acc[index] : acc[keyStr];
+    }
+    if (typeof acc === 'object') {
+      return acc[keyStr];
+    }
+    return undefined;
+  }, source);
+};
+exports.getValueByName = getValueByName;
+const setValueByName = (source, name, value) => {
+  const path = toNamePath(name);
+  if (!path.length) return source;
+  const clone = Array.isArray(source) ? [...source] : typeof source === 'object' && source !== null ? {
+    ...source
+  } : {};
+  let cursor = clone;
+  path.forEach((key, index) => {
+    const keyStr = String(key);
+    const keyIndex = Number(keyStr);
+    if (index === path.length - 1) {
+      if (Array.isArray(cursor) && Number.isFinite(keyIndex)) {
+        cursor[keyIndex] = value;
+      } else {
+        ;
+        cursor[keyStr] = value;
+      }
+      return;
+    }
+    const nextVal = Array.isArray(cursor) && Number.isFinite(keyIndex) ? cursor[keyIndex] : cursor[keyStr];
+    const nextContainer = nextVal === undefined || nextVal === null ? (0, _utils.isNumber)(path[index + 1]) ? [] : {} : Array.isArray(nextVal) ? [...nextVal] : typeof nextVal === 'object' ? {
+      ...nextVal
+    } : {};
+    if (Array.isArray(cursor) && Number.isFinite(keyIndex)) {
+      cursor[keyIndex] = nextContainer;
+    } else {
+      ;
+      cursor[keyStr] = nextContainer;
+    }
+    cursor = nextContainer;
+  });
+  return clone;
+};
+exports.setValueByName = setValueByName;

package/dist/cjs/grid/Grid.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Grid = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _GridContext = require("./GridContext");
+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 Grid = props => {
+  const {
+    tokensOverride,
+    children,
+    columnNum: columnNumProp,
+    gutter: gutterProp,
+    border: borderProp,
+    center: centerProp,
+    square: squareProp,
+    direction: directionProp,
+    reverse: reverseProp,
+    clickable: clickableProp,
+    iconSize: iconSizeProp,
+    iconColor,
+    style,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useGridTokens)(tokensOverride);
+  const columnNumValue = columnNumProp ?? tokens.defaults.columnNum;
+  const columnNum = Number.isFinite(columnNumValue) && columnNumValue > 0 ? Math.floor(columnNumValue) : tokens.defaults.columnNum;
+  const gutterValue = gutterProp ?? tokens.defaults.gutter;
+  const gutter = Number.isFinite(gutterValue) && gutterValue > 0 ? gutterValue : 0;
+  const border = borderProp ?? tokens.defaults.border;
+  const center = centerProp ?? tokens.defaults.center;
+  const square = squareProp ?? tokens.defaults.square;
+  const direction = directionProp ?? tokens.defaults.direction;
+  const reverse = reverseProp ?? tokens.defaults.reverse;
+  const clickable = clickableProp ?? tokens.defaults.clickable;
+  const iconSizeValue = iconSizeProp ?? tokens.defaults.iconSize;
+  const iconSize = Number.isFinite(iconSizeValue) && iconSizeValue > 0 ? iconSizeValue : tokens.defaults.iconSize;
+  const childArray = _react().default.Children.toArray(children).filter(child => /*#__PURE__*/_react().default.isValidElement(child));
+  const showBorder = border && !gutter;
+  const borderColor = tokens.colors.border;
+  const topBorder = showBorder && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.border, tokens.layout.borderTop, (0, _utils.createHairlineView)({
+      position: 'top',
+      color: borderColor,
+      left: 0,
+      right: 0,
+      top: 0
+    })]
+  });
+  const bottomBorder = showBorder && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.border, tokens.layout.borderBottom, (0, _utils.createHairlineView)({
+      position: 'bottom',
+      color: borderColor,
+      left: 0,
+      right: 0,
+      bottom: 0
+    })]
+  });
+  const contextValue = (0, _react().useMemo)(() => ({
+    columnNum,
+    gutter,
+    border,
+    center,
+    square,
+    direction,
+    reverse,
+    clickable,
+    iconSize,
+    iconColor,
+    count: childArray.length,
+    tokens
+  }), [border, center, childArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
+  return /*#__PURE__*/_react().default.createElement(_GridContext.GridContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    style: [tokens.layout.container, gutter ? {
+      paddingLeft: gutter
+    } : undefined, style]
+  }, rest), topBorder, childArray.map((child, index) => /*#__PURE__*/_react().default.cloneElement(child, {
+    gridItemIndex: index,
+    key: child.key ?? index
+  })), bottomBorder));
+};
+exports.Grid = Grid;
+Grid.displayName = 'Grid';

package/dist/cjs/grid/GridContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridContext = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GridContext = exports.GridContext = /*#__PURE__*/_react().default.createContext(null);

package/dist/cjs/grid/GridItem.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridItem = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _badge = _interopRequireDefault(require("../badge"));
+var _utils = require("../../utils");
+var _GridContext = require("./GridContext");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 GridItem = props => {
+  const context = (0, _react().useContext)(_GridContext.GridContext);
+  if (!context) throw new Error('GridItem must be used within Grid');
+  const {
+    gridItemIndex = 0,
+    text,
+    icon,
+    iconColor: iconColorProp,
+    badge,
+    dot,
+    contentStyle,
+    textStyle,
+    children,
+    style,
+    onPress,
+    ...rest
+  } = props;
+  const {
+    tokens,
+    columnNum,
+    gutter,
+    border,
+    center,
+    square,
+    direction,
+    reverse,
+    clickable,
+    iconSize,
+    iconColor,
+    count
+  } = context;
+  const widthPercent = `${100 / columnNum}%`;
+  const isLastColumn = (gridItemIndex + 1) % columnNum === 0;
+  const rowIndex = Math.floor(gridItemIndex / columnNum);
+  const lastRowIndex = Math.floor((count - 1) / columnNum);
+  const contentWrapperStyle = [tokens.layout.itemContentBase, direction === 'horizontal' ? tokens.layout.itemHorizontal : tokens.layout.itemVertical, center && tokens.layout.itemCenter, reverse ? direction === 'horizontal' ? tokens.layout.itemReverseRow : tokens.layout.itemReverseColumn : null, square ? tokens.layout.itemContentSquare : null, {
+    paddingHorizontal: tokens.spacing.paddingHorizontal,
+    paddingVertical: tokens.spacing.paddingVertical,
+    backgroundColor: tokens.colors.background
+  }, contentStyle];
+  const hasText = (0, _utils.isRenderable)(text);
+  const resolvedIconColor = iconColorProp ?? iconColor ?? tokens.colors.text;
+  let innerContent = children;
+  if (!innerContent) {
+    let iconElement = null;
+    if (icon || badge || dot) {
+      const {
+        style: badgeWrapperStyle,
+        ...badgeRest
+      } = badge ?? {};
+      const marginKey = direction === 'vertical' ? reverse ? 'marginTop' : 'marginBottom' : reverse ? 'marginLeft' : 'marginRight';
+      const iconWrapperStyle = [tokens.layout.iconWrapper, hasText && {
+        [marginKey]: tokens.spacing.iconGap
+      }];
+      const iconNode = (0, _utils.isFunction)(icon) ? icon(iconSize, resolvedIconColor) : icon;
+      const content = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: iconWrapperStyle
+      }, iconNode);
+      iconElement = badge || dot ? /*#__PURE__*/_react().default.createElement(_badge.default, _extends({
+        dot: dot
+      }, badgeRest, {
+        style: center ? [badgeWrapperStyle, {
+          alignSelf: 'center'
+        }] : badgeWrapperStyle
+      }), content) : content;
+    }
+    const textElement = hasText && ((0, _utils.isText)(text) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [tokens.layout.text, {
+        color: tokens.colors.text,
+        fontSize: tokens.typography.fontSize,
+        lineHeight: tokens.typography.lineHeight,
+        fontFamily: tokens.typography.fontFamily,
+        fontWeight: tokens.typography.fontWeight
+      }, textStyle],
+      numberOfLines: tokens.defaults.textNumberOfLines
+    }, text) : text);
+    innerContent = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, iconElement, textElement);
+  }
+  const rightBorder = border && !gutter && !isLastColumn && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.itemBorderRight, (0, _utils.createHairlineView)({
+      position: 'right',
+      color: tokens.colors.border,
+      top: 0,
+      bottom: 0,
+      right: 0
+    })]
+  });
+  const bottomBorder = border && !gutter && rowIndex < lastRowIndex && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.itemBorderBottom, (0, _utils.createHairlineView)({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0,
+      bottom: 0
+    })]
+  });
+  const content = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: contentWrapperStyle
+  }, innerContent, rightBorder, bottomBorder);
+  const baseItemStyle = {
+    width: widthPercent,
+    flexGrow: 0,
+    flexShrink: 0,
+    paddingRight: gutter ? gutter : undefined,
+    marginTop: gutter && rowIndex > 0 ? gutter : undefined
+  };
+  const isInteractive = clickable || (0, _utils.isFunction)(onPress);
+  if (isInteractive) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+      style: pressableState => [baseItemStyle, typeof style === 'function' ? style(pressableState) : style, {
+        opacity: pressableState.pressed ? tokens.defaults.pressedOpacity : 1
+      }],
+      android_ripple: {
+        color: tokens.colors.active
+      },
+      onPress: onPress
+    }, rest), content);
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    style: [baseItemStyle, typeof style === 'function' ? style({
+      pressed: false
+    }) : style]
+  }, rest), content);
+};
+exports.GridItem = GridItem;
+GridItem.displayName = 'GridItem';

package/dist/cjs/grid/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GridComponent = void 0;
+var _Grid = require("./Grid");
+var _GridItem = require("./GridItem");
+const GridComponent = exports.GridComponent = Object.assign(_Grid.Grid, {
+  Item: _GridItem.GridItem
+});
+var _default = exports.default = GridComponent;