react-native-system-ui 0.0.1 → 0.0.2

package/dist/es/form/Form.js

@@ -0,0 +1,351 @@
+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, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { isPromiseLike } from '../../utils/promise';
+import { isNumber, isString, isText } from '../../utils/validate';
+import { FormContext } from './FormContext';
+import { getValueByName, normalizeTrigger, serializeNamePath, setValueByName } from './utils';
+const runRuleValidation = (rule, value, values) => {
+  const message = rule.message ?? '表单验证未通过';
+  const empty = value == null || value === '' || Array.isArray(value) && value.length === 0;
+  if (rule.required && (empty || rule.whitespace && isString(value) && value.trim().length === 0)) {
+    return message;
+  }
+  if (empty) return null;
+  if (rule.pattern && isString(value) && !rule.pattern.test(value)) return message;
+  if (rule.len !== undefined || rule.min !== undefined || rule.max !== undefined) {
+    const length = isNumber(value) ? value : isString(value) || Array.isArray(value) ? value.length : 0;
+    if (rule.len !== undefined && length !== rule.len) return message;
+    if (rule.min !== undefined && length < rule.min) return message;
+    if (rule.max !== undefined && length > rule.max) return message;
+  }
+  if (!rule.validator) return null;
+  const handle = result => isString(result) ? result : result === false ? message : null;
+  const result = rule.validator(value, values);
+  return isPromiseLike(result) ? result.then(handle) : handle(result);
+};
+const shallowEqual = (prev, next) => {
+  if (prev === next) return true;
+  if (!prev || !next) return false;
+  const prevKeys = Object.keys(prev);
+  const nextKeys = Object.keys(next);
+  if (prevKeys.length !== nextKeys.length) {
+    return false;
+  }
+  for (const key of prevKeys) {
+    if (prev[key] !== next[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    initialValues: initialValuesProp,
+    colon,
+    labelWidth,
+    showValidateMessage = true,
+    onValuesChange,
+    onFinish,
+    style,
+    footer,
+    children,
+    ...rest
+  } = props;
+  const defaultInitialValuesRef = useRef({});
+  const mergedInitialValues = initialValuesProp ?? defaultInitialValuesRef.current;
+  const [values, setValues] = useState(mergedInitialValues);
+  const [errors, setErrors] = useState({});
+  const lastInitialValuesRef = useRef(mergedInitialValues);
+  const fieldsRef = useRef({});
+  const dependencyGraphRef = useRef(new Map());
+  const valuesRef = useRef(values);
+  const errorsRef = useRef(errors);
+  const validationSeqRef = useRef({});
+  const subscribersRef = useRef(new Set());
+  useEffect(() => {
+    if (shallowEqual(lastInitialValuesRef.current, mergedInitialValues)) {
+      return;
+    }
+    lastInitialValuesRef.current = mergedInitialValues;
+    valuesRef.current = mergedInitialValues;
+    errorsRef.current = {};
+    setValues(mergedInitialValues);
+    setErrors({});
+  }, [mergedInitialValues]);
+  const setFieldErrors = useCallback((name, nextErrors) => {
+    const key = serializeNamePath(name);
+    setErrors(prev => {
+      const prevErrors = prev[key];
+      if (!nextErrors.length) {
+        if (!prevErrors) return prev;
+        const clone = {
+          ...prev
+        };
+        delete clone[key];
+        errorsRef.current = clone;
+        return clone;
+      }
+      if (prevErrors?.[0] === nextErrors[0] && prevErrors.length === nextErrors.length) {
+        return prev;
+      }
+      const clone = {
+        ...prev,
+        [key]: nextErrors
+      };
+      errorsRef.current = clone;
+      return clone;
+    });
+  }, []);
+  const registerField = useCallback((name, options) => {
+    const key = serializeNamePath(name);
+    const prev = fieldsRef.current[key];
+    if (prev?.dependencies?.length) {
+      for (const dep of prev.dependencies) {
+        const depKey = serializeNamePath(dep);
+        const set = dependencyGraphRef.current.get(depKey);
+        if (!set) continue;
+        set.delete(key);
+        if (!set.size) dependencyGraphRef.current.delete(depKey);
+      }
+    }
+    fieldsRef.current[key] = {
+      ...options,
+      name
+    };
+    if (options.dependencies?.length) {
+      for (const dep of options.dependencies) {
+        const depKey = serializeNamePath(dep);
+        const set = dependencyGraphRef.current.get(depKey);
+        if (set) {
+          set.add(key);
+        } else {
+          dependencyGraphRef.current.set(depKey, new Set([key]));
+        }
+      }
+    }
+    if (options.initialValue !== undefined) {
+      const existsInInitial = getValueByName(lastInitialValuesRef.current, name);
+      if (existsInInitial === undefined) {
+        lastInitialValuesRef.current = setValueByName(lastInitialValuesRef.current, name, options.initialValue);
+      }
+      const existsInState = getValueByName(valuesRef.current, name);
+      if (existsInState === undefined) {
+        setValues(prev => {
+          if (getValueByName(prev, name) !== undefined) return prev;
+          const next = setValueByName(prev, name, options.initialValue);
+          valuesRef.current = next;
+          return next;
+        });
+      }
+    }
+    return () => {
+      const current = fieldsRef.current[key];
+      delete fieldsRef.current[key];
+      if (current?.dependencies?.length) {
+        for (const dep of current.dependencies) {
+          const depKey = serializeNamePath(dep);
+          const set = dependencyGraphRef.current.get(depKey);
+          if (!set) continue;
+          set.delete(key);
+          if (!set.size) dependencyGraphRef.current.delete(depKey);
+        }
+      }
+      setFieldErrors(name, []);
+    };
+  }, [setFieldErrors]);
+  const notify = useCallback((changedValues, nextValues) => {
+    subscribersRef.current.forEach(listener => listener(changedValues, nextValues));
+  }, []);
+  const runFieldValidation = useCallback(async (name, trigger, valueOverride, valuesOverride) => {
+    const key = serializeNamePath(name);
+    const validationSeq = (validationSeqRef.current[key] ?? 0) + 1;
+    validationSeqRef.current[key] = validationSeq;
+    const fieldOptions = fieldsRef.current[key];
+    const fieldRules = fieldOptions?.rules ?? [];
+    if (!fieldRules.length) {
+      setFieldErrors(name, []);
+      return true;
+    }
+    let activeRules = trigger ? fieldRules.filter(rule => {
+      const ruleTrigger = rule.validateTrigger ?? fieldOptions.validateTrigger;
+      return !ruleTrigger || normalizeTrigger(ruleTrigger).includes(trigger);
+    }) : fieldRules;
+    if (!activeRules.length) {
+      if (!errorsRef.current[key]?.length) return true;
+      activeRules = fieldRules;
+    }
+    const currentValues = valuesOverride ?? valuesRef.current;
+    const value = valueOverride ?? getValueByName(currentValues, name);
+    for (const rule of activeRules) {
+      const result = runRuleValidation(rule, value, currentValues);
+      const error = isPromiseLike(result) ? await result : result;
+      if (validationSeqRef.current[key] !== validationSeq) {
+        return true;
+      }
+      if (error) {
+        setFieldErrors(name, [error]);
+        return false;
+      }
+    }
+    if (validationSeqRef.current[key] !== validationSeq) {
+      return true;
+    }
+    setFieldErrors(name, []);
+    return true;
+  }, [setFieldErrors]);
+  const validateFields = useCallback(async names => {
+    const fieldNames = names ?? Object.values(fieldsRef.current).map(item => item.name);
+    const results = await Promise.all(fieldNames.map(name => runFieldValidation(name)));
+    const hasError = results.some(result => !result);
+    if (hasError) {
+      throw errorsRef.current;
+    }
+    return valuesRef.current;
+  }, [runFieldValidation]);
+  const setFieldValue = useCallback((name, value, trigger) => {
+    const nameKey = serializeNamePath(name);
+    setValues(prev => {
+      const prevValue = getValueByName(prev, name);
+      if (prevValue === value) return prev;
+      const next = setValueByName(prev, name, value);
+      valuesRef.current = next;
+      onValuesChange?.(next, nameKey, value);
+      runFieldValidation(name, trigger, value, next);
+      const dependents = dependencyGraphRef.current.get(nameKey);
+      if (dependents?.size) {
+        for (const dependentKey of dependents) {
+          const meta = fieldsRef.current[dependentKey];
+          if (!meta) continue;
+          runFieldValidation(meta.name, trigger, getValueByName(next, meta.name), next);
+        }
+      }
+      notify({
+        [nameKey]: value
+      }, next);
+      return next;
+    });
+  }, [notify, onValuesChange, runFieldValidation]);
+  const formApi = useMemo(() => ({
+    submit: async () => {
+      try {
+        const result = await validateFields();
+        onFinish?.(result);
+        return result;
+      } catch (error) {
+        return undefined;
+      }
+    },
+    getFieldsValue: () => valuesRef.current,
+    setFieldsValue: next => {
+      setValues(prev => {
+        let merged = prev;
+        const changed = {};
+        Object.keys(next).forEach(key => {
+          const newVal = next[key];
+          if (getValueByName(merged, key) === newVal) return;
+          changed[key] = newVal;
+          merged = setValueByName(merged, key, newVal);
+          onValuesChange?.(merged, key, newVal);
+          runFieldValidation(key, undefined, newVal, merged);
+          const dependents = dependencyGraphRef.current.get(key);
+          if (dependents?.size) {
+            for (const dependentKey of dependents) {
+              const meta = fieldsRef.current[dependentKey];
+              if (!meta) continue;
+              runFieldValidation(meta.name, undefined, getValueByName(merged, meta.name), merged);
+            }
+          }
+        });
+        if (merged === prev) return prev;
+        valuesRef.current = merged;
+        notify(changed, merged);
+        return merged;
+      });
+    },
+    resetFields: () => {
+      let next = lastInitialValuesRef.current;
+      Object.values(fieldsRef.current).forEach(meta => {
+        if (meta.initialValue === undefined) return;
+        if (getValueByName(next, meta.name) !== undefined) return;
+        next = setValueByName(next, meta.name, meta.initialValue);
+      });
+      valuesRef.current = next;
+      errorsRef.current = {};
+      setValues(next);
+      setErrors({});
+      notify(next, next);
+    },
+    validateFields,
+    getFieldError: name => errorsRef.current[serializeNamePath(name)] ?? []
+  }), [notify, onFinish, onValuesChange, validateFields, runFieldValidation]);
+  useImperativeHandle(ref, () => formApi, [formApi]);
+  const getFieldError = useCallback(name => errors[serializeNamePath(name)], [errors]);
+  const getFieldValue = useCallback(name => getValueByName(values, name), [values]);
+  const contextValidateField = useCallback((name, trigger) => runFieldValidation(name, trigger), [runFieldValidation]);
+  const contextValue = useMemo(() => ({
+    values,
+    getFieldValue,
+    setFieldValue,
+    registerField,
+    getFieldError,
+    validateField: contextValidateField,
+    getFieldsValue: () => values,
+    subscribe: listener => {
+      subscribersRef.current.add(listener);
+      return () => subscribersRef.current.delete(listener);
+    },
+    form: formApi,
+    colon,
+    labelWidth,
+    showValidateMessage
+  }), [values, setFieldValue, registerField, getFieldError, contextValidateField, formApi, colon, labelWidth, showValidateMessage]);
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(View, _extends({
+    style: style
+  }, rest), children, footer));
+});
+InternalForm.displayName = 'Form';
+export const useWatch = (name, formRef) => {
+  const context = useContext(FormContext);
+  const names = useMemo(() => {
+    if (name === undefined) return undefined;
+    if (!Array.isArray(name)) return [name];
+    return name.length && isText(name[0]) ? [name] : name;
+  }, [name]);
+  const getSnapshot = useCallback(allValues => {
+    const source = allValues ?? context?.getFieldsValue?.() ?? formRef?.current?.getFieldsValue?.() ?? {};
+    if (!names) return source;
+    if (names.length === 1) return getValueByName(source, names[0]);
+    const picked = {};
+    for (const key of names) picked[serializeNamePath(key)] = getValueByName(source, key);
+    return picked;
+  }, [context, formRef, names]);
+  const [value, setValue] = useState(() => getSnapshot());
+  useEffect(() => {
+    if (!context?.subscribe) return undefined;
+    return context.subscribe((changed, all) => {
+      if (!names || names.some(key => serializeNamePath(key) in changed)) {
+        setValue(getSnapshot(all));
+      }
+    });
+  }, [context, getSnapshot, names]);
+  return value;
+};
+export const FormSubscribe = ({
+  to,
+  children
+}) => {
+  const context = useContext(FormContext);
+  const [changed, setChanged] = useState({});
+  useEffect(() => {
+    if (!context?.subscribe) return undefined;
+    return context.subscribe(next => {
+      if (to && !Object.keys(next).some(key => to.includes(key))) return;
+      setChanged(next);
+    });
+  }, [context, to]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children(changed, context?.form || null));
+};
+export default InternalForm;

package/dist/es/form/FormItem.js

@@ -0,0 +1,133 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import { isFunction, isString } from '../../utils';
+import { FormContext } from './FormContext';
+import { normalizeTrigger } from './utils';
+const EMPTY_RULES = [];
+export 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 = useContext(FormContext);
+  if (!context) {
+    if (renderProps) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, children({
+        getFieldValue: () => undefined,
+        getFieldsValue: () => ({}),
+        form: null
+      }));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  const normalizedRules = rules ?? EMPTY_RULES;
+  const prevValuesRef = useRef(context.values);
+  useEffect(() => {
+    prevValuesRef.current = context.values;
+  }, [context.values]);
+  const shouldRender = !shouldUpdate || shouldUpdate(prevValuesRef.current, context.values);
+  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 = 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.createElement(React.Fragment, null, node);
+  }
+  if (!name) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  if (!shouldRender) return null;
+  const childArray = React.Children.toArray(children);
+  if (childArray.length !== 1) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  const child = childArray[0];
+  const handleChange = next => {
+    context.setFieldValue(name, next, trigger);
+    const original = child.props[trigger];
+    if (isFunction(original)) {
+      original(next);
+    }
+  };
+  const isFieldLike = (() => {
+    const displayName = child.type.displayName;
+    return 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 (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.cloneElement(child, injectedProps);
+};
+FormItem.displayName = 'FormItem';

package/dist/es/form/FormList.js

@@ -0,0 +1,56 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { FormContext } from './FormContext';
+import { getValueByName } from './utils';
+export const FormList = ({
+  name,
+  initialValue,
+  children
+}) => {
+  const context = useContext(FormContext);
+  const keyRef = useRef(0);
+  const ensureInitial = useCallback(() => {
+    if (!context) return;
+    const current = getValueByName(context.values, name);
+    if (current === undefined && initialValue !== undefined) {
+      context.setFieldValue(name, initialValue);
+    }
+  }, [context, initialValue, name]);
+  useEffect(() => {
+    ensureInitial();
+  }, [ensureInitial]);
+  if (!context) {
+    return null;
+  }
+  const listValueRaw = 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.createElement(React.Fragment, null, children(fields, {
+    add,
+    remove,
+    move
+  }));
+};
+FormList.displayName = 'Form.List';

package/dist/es/form/index.js

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+import InternalForm, { FormSubscribe, useWatch } from './Form';
+import { FormItem } from './FormItem';
+import { FormList } from './FormList';
+const Form = Object.assign(InternalForm, {
+  Item: FormItem,
+  List: FormList,
+  useForm: () => useRef(null),
+  Subscribe: FormSubscribe,
+  useWatch
+});
+export default Form;
+export { Form, FormItem, FormList, FormSubscribe, useWatch };

package/dist/es/form/utils.js

@@ -0,0 +1,63 @@
+import { isNumber, isString } from '../../utils';
+export const normalizeTrigger = trigger => trigger ? Array.isArray(trigger) ? trigger : [trigger] : [];
+export const toNamePath = name => {
+  if (name === undefined || name === null) return [];
+  if (Array.isArray(name)) return name;
+  if (isNumber(name)) return [name];
+  if (isString(name)) {
+    return name.split('.');
+  }
+  return [String(name)];
+};
+export const serializeNamePath = name => {
+  const path = toNamePath(name);
+  return path.join('.');
+};
+export 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);
+};
+export 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 ? 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;
+};

package/dist/es/grid/Grid.js

@@ -0,0 +1,83 @@
+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, { useMemo } from 'react';
+import { View } from 'react-native';
+import { createHairlineView } from '../../utils';
+import { GridContext } from './GridContext';
+import { useGridTokens } from './tokens';
+export 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 = 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.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
+  const showBorder = border && !gutter;
+  const borderColor = tokens.colors.border;
+  const topBorder = showBorder && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.border, tokens.layout.borderTop, createHairlineView({
+      position: 'top',
+      color: borderColor,
+      left: 0,
+      right: 0,
+      top: 0
+    })]
+  });
+  const bottomBorder = showBorder && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.border, tokens.layout.borderBottom, createHairlineView({
+      position: 'bottom',
+      color: borderColor,
+      left: 0,
+      right: 0,
+      bottom: 0
+    })]
+  });
+  const contextValue = 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.createElement(GridContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(View, _extends({
+    style: [tokens.layout.container, gutter ? {
+      paddingLeft: gutter
+    } : undefined, style]
+  }, rest), topBorder, childArray.map((child, index) => /*#__PURE__*/React.cloneElement(child, {
+    gridItemIndex: index,
+    key: child.key ?? index
+  })), bottomBorder));
+};
+Grid.displayName = 'Grid';