react-native-system-ui 1.0.1 → 1.0.3

package/dist/cjs/components/field/tokens.js

@@ -1,150 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFieldTokens = void 0;
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-var _designSystem = require("../../design-system");
-const fieldLayout = _reactNative().StyleSheet.create({
-  body: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  controlWrapper: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: 0
-  },
-  input: {
-    flex: 1,
-    minWidth: 0,
-    padding: 0,
-    margin: 0,
-    borderWidth: 0,
-    outlineStyle: 'solid',
-    outlineWidth: 0,
-    outlineColor: 'transparent',
-    backgroundColor: 'transparent',
-    includeFontPadding: false,
-    textAlignVertical: 'center'
-  },
-  textarea: {
-    flex: 1,
-    padding: 0,
-    margin: 0,
-    borderWidth: 0,
-    outlineStyle: 'solid',
-    outlineWidth: 0,
-    outlineColor: 'transparent',
-    backgroundColor: 'transparent',
-    textAlignVertical: 'top'
-  },
-  children: {
-    justifyContent: 'center'
-  },
-  leftIcon: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  rightIcon: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  prefix: {
-    justifyContent: 'center'
-  },
-  suffix: {
-    justifyContent: 'center'
-  },
-  affixText: {
-    includeFontPadding: false
-  },
-  clearIcon: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  labelWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexShrink: 0,
-    flexGrow: 0,
-    minWidth: 0
-  },
-  labelRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: 0
-  },
-  tooltip: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  message: {},
-  wordLimit: {}
-});
-const createFieldTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize
-  } = foundations;
-  return {
-    layout: fieldLayout,
-    defaults: {
-      labelWidth: 72,
-      labelAlign: 'left',
-      inputAlign: 'left',
-      controlAlign: 'left',
-      clearTrigger: 'focus',
-      formatTrigger: 'onChange',
-      rows: 2,
-      textareaLineHeight: 20
-    },
-    colors: {
-      label: palette.default[700],
-      input: palette.default[800],
-      placeholder: palette.default[300] ?? '#c8c9cc',
-      error: palette.danger[500],
-      disabled: palette.default[500],
-      intro: palette.default[600],
-      tooltip: palette.default[500],
-      clear: palette.default[500],
-      rightIcon: palette.default[500],
-      wordLimit: palette.default[600] ?? '#646566'
-    },
-    spacing: {
-      labelGap: spacing.none,
-      leftIconGap: spacing.xs,
-      rightIconGap: spacing.sm * 1,
-      prefixGap: spacing.sm * 1,
-      suffixGap: spacing.sm * 1,
-      messageMarginTop: spacing.none,
-      introMarginTop: spacing.none,
-      wordLimitMarginTop: spacing.none
-    },
-    typography: {
-      labelSize: fontSize.sm,
-      inputSize: fontSize.sm,
-      inputLineHeight: 24,
-      placeholderSize: fontSize.sm,
-      messageSize: 12,
-      introSize: 12,
-      wordLimitSize: fontSize.xs
-    },
-    sizes: {
-      icon: 16,
-      clearIcon: 16,
-      textareaMinHeight: 60,
-      controlMinHeight: 24
-    }
-  };
-};
-const useFieldTokens = exports.useFieldTokens = (0, _designSystem.createComponentTokensHook)('field', createFieldTokens);
+"use strict";function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFieldTokens=void 0;var _designSystem=require("../../design-system");const fieldLayout=_reactNative().StyleSheet.create({body:{flexDirection:"row",alignItems:"center"},controlWrapper:{flex:1,flexDirection:"row",alignItems:"center",minWidth:0},input:{flex:1,minWidth:0,padding:0,margin:0,borderWidth:0,outlineStyle:"solid",outlineWidth:0,outlineColor:"transparent",backgroundColor:"transparent",includeFontPadding:!1,textAlignVertical:"center"},textarea:{flex:1,padding:0,margin:0,borderWidth:0,outlineStyle:"solid",outlineWidth:0,outlineColor:"transparent",backgroundColor:"transparent",textAlignVertical:"top"},children:{justifyContent:"center"},leftIcon:{justifyContent:"center",alignItems:"center"},rightIcon:{justifyContent:"center",alignItems:"center"},prefix:{justifyContent:"center"},suffix:{justifyContent:"center"},affixText:{includeFontPadding:!1},clearIcon:{justifyContent:"center",alignItems:"center"},labelWrapper:{flexDirection:"row",alignItems:"center",flexShrink:0,flexGrow:0,minWidth:0},labelRow:{flexDirection:"row",alignItems:"center",minWidth:0},tooltip:{justifyContent:"center",alignItems:"center"},message:{},wordLimit:{}}),createFieldTokens=e=>{const{palette:t,spacing:n,fontSize:i}=e;return{layout:fieldLayout,defaults:{labelWidth:72,labelAlign:"left",inputAlign:"left",controlAlign:"left",clearTrigger:"focus",formatTrigger:"onChange",rows:2,textareaLineHeight:20},colors:{label:t.default[700],input:t.default[800],placeholder:t.default[300]??"#c8c9cc",error:t.danger[500],disabled:t.default[500],intro:t.default[600],tooltip:t.default[500],clear:t.default[500],rightIcon:t.default[500],wordLimit:t.default[600]??"#646566"},spacing:{labelGap:n.none,leftIconGap:n.xs,rightIconGap:1*n.sm,prefixGap:1*n.sm,suffixGap:1*n.sm,messageMarginTop:n.none,introMarginTop:n.none,wordLimitMarginTop:n.none},typography:{labelSize:i.sm,inputSize:i.sm,inputLineHeight:24,placeholderSize:i.sm,messageSize:12,introSize:12,wordLimitSize:i.xs},sizes:{icon:16,clearIcon:16,textareaMinHeight:60,controlMinHeight:24}}},useFieldTokens=exports.useFieldTokens=(0,_designSystem.createComponentTokensHook)("field",createFieldTokens);

package/dist/cjs/components/flex/Flex.js

@@ -1,85 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FlexContext = exports.Flex = 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 _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); }
-const FlexContext = exports.FlexContext = /*#__PURE__*/_react().default.createContext({
-  horizontalGap: 0,
-  verticalGap: 0,
-  columns: 24
-});
-const alignMap = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-  baseline: 'baseline',
-  stretch: 'stretch'
-};
-const justifyMap = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  around: 'space-around',
-  between: 'space-between'
-};
-const FlexImpl = props => {
-  const {
-    tokensOverride,
-    children,
-    direction: dirP,
-    wrap: wrapP,
-    gutter: gutP,
-    align: alignP,
-    justify: justP,
-    style,
-    columns: colP
-  } = props;
-  const tokens = (0, _tokens.useFlexTokens)(tokensOverride);
-  const dir = dirP ?? tokens.defaults.direction;
-  const wrap = wrapP ?? tokens.defaults.wrap;
-  const gut = gutP ?? tokens.defaults.gutter;
-  const align = alignP ?? tokens.defaults.align;
-  const just = justP ?? tokens.defaults.justify;
-  const cols = Math.max(1, colP ?? tokens.defaults.columns);
-  const [hR, vR] = Array.isArray(gut) ? gut : [gut, 0];
-  const hG = Math.max(0, hR ?? 0);
-  const vG = Math.max(0, vR ?? 0);
-  const web = _reactNative().Platform.OS === 'web';
-  const ctx = (0, _react().useMemo)(() => ({
-    horizontalGap: hG,
-    verticalGap: vG,
-    columns: cols
-  }), [hG, vG, cols]);
-  return /*#__PURE__*/_react().default.createElement(FlexContext.Provider, {
-    value: ctx
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.container, {
-      flexDirection: dir,
-      flexWrap: wrap,
-      alignItems: alignMap[align],
-      justifyContent: justifyMap[just],
-      marginHorizontal: !web && hG ? -hG / 2 : undefined,
-      marginVertical: !web && vG ? -vG / 2 : undefined,
-      columnGap: web ? hG : undefined,
-      rowGap: web ? vG : undefined
-    }, style]
-  }, children));
-};
-const Flex = exports.Flex = /*#__PURE__*/_react().default.memo(FlexImpl);
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.FlexContext=exports.Flex=void 0;var _tokens=require("./tokens");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,o,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?n(i,t,o):i[t]=e[t]);return i})(e,t)}const FlexContext=exports.FlexContext=_react().default.createContext({horizontalGap:0,verticalGap:0,columns:24}),alignMap={start:"flex-start",center:"center",end:"flex-end",baseline:"baseline",stretch:"stretch"},justifyMap={start:"flex-start",end:"flex-end",center:"center",around:"space-around",between:"space-between"},FlexImpl=e=>{const{tokensOverride:t,children:r,direction:a,wrap:n,gutter:o,align:i,justify:l,style:c,columns:u}=e,s=(0,_tokens.useFlexTokens)(t),f=a??s.defaults.direction,d=n??s.defaults.wrap,p=o??s.defaults.gutter,x=i??s.defaults.align,_=l??s.defaults.justify,m=Math.max(1,u??s.defaults.columns),[v,y]=Array.isArray(p)?p:[p,0],M=Math.max(0,v??0),g=Math.max(0,y??0),w="web"===_reactNative().Platform.OS,h=(0,_react().useMemo)(()=>({horizontalGap:M,verticalGap:g,columns:m}),[M,g,m]);return _react().default.createElement(FlexContext.Provider,{value:h},_react().default.createElement(_reactNative().View,{style:[s.layout.container,{flexDirection:f,flexWrap:d,alignItems:alignMap[x],justifyContent:justifyMap[_],marginHorizontal:!w&&M?-M/2:void 0,marginVertical:!w&&g?-g/2:void 0,columnGap:w?M:void 0,rowGap:w?g:void 0},c]},r))},Flex=exports.Flex=_react().default.memo(FlexImpl);

package/dist/cjs/components/flex/FlexContext.js

@@ -1,12 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "FlexContext", {
-  enumerable: true,
-  get: function () {
-    return _Flex.FlexContext;
-  }
-});
-var _Flex = require("./Flex");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FlexContext",{enumerable:!0,get:function(){return _Flex.FlexContext}});var _Flex=require("./Flex");

package/dist/cjs/components/flex/FlexItem.js

@@ -1,95 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FlexItem = 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 _FlexContext = require("./FlexContext");
-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 parseFlex = v => {
-  if ((0, _utils.isNumber)(v)) return {
-    flex: v
-  };
-  if (!v) return undefined;
-  const str = v.trim();
-  if (!str) return undefined;
-  if (str === 'auto') return {
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 'auto'
-  };
-  if (str === 'none') return {
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto'
-  };
-  const num = Number(str);
-  if ((0, _utils.isNumber)(num)) return {
-    flex: num
-  };
-  const parts = str.split(/\s+/);
-  if (parts.length >= 2) {
-    const [grow, shrink] = parts.map(Number);
-    if ((0, _utils.isNumber)(grow) && (0, _utils.isNumber)(shrink)) {
-      const basisStr = parts.slice(2).join(' ');
-      let flexBasis;
-      if (basisStr === 'auto') flexBasis = 'auto';else if (basisStr) {
-        const pxMatch = basisStr.match(/^(-?\d+(?:\.\d+)?)px$/);
-        const basisNum = pxMatch ? Number(pxMatch[1]) : Number(basisStr);
-        if ((0, _utils.isNumber)(basisNum)) flexBasis = basisNum;
-      }
-      return {
-        flexGrow: grow,
-        flexShrink: shrink,
-        flexBasis
-      };
-    }
-  }
-  return undefined;
-};
-const FlexItemImpl = ({
-  span,
-  flex,
-  style: s,
-  children: c
-}) => {
-  const {
-    horizontalGap: hg,
-    verticalGap: vg,
-    columns: cols
-  } = (0, _react().useContext)(_FlexContext.FlexContext);
-  const sg = _reactNative().Platform.OS === 'web';
-  if ((0, _utils.isNumber)(span) && span <= 0) return null;
-  const ws = {};
-  if ((0, _utils.isNumber)(span)) {
-    const sc = Math.max(1, cols);
-    const p = Math.min(Math.max(span, 0), sc) / sc;
-    ws.width = `${p * 100}%`;
-    ws.flexGrow = 0;
-    ws.flexShrink = 0;
-  }
-  ;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [sg ? null : {
-      paddingHorizontal: hg / 2,
-      paddingVertical: vg / 2
-    }, ws, parseFlex(flex), s]
-  }, c);
-};
-const FlexItem = exports.FlexItem = /*#__PURE__*/_react().default.memo(FlexItemImpl);
-FlexItem.displayName = 'FlexItem';
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.FlexItem=void 0;var _FlexContext=require("./FlexContext"),_utils=require("../../utils");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,l,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(n=t?i:r){if(n.has(e))return n.get(e);n.set(e,u)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?n(u,t,l):u[t]=e[t]);return u})(e,t)}const parseFlex=e=>{if((0,_utils.isNumber)(e))return{flex:e};if(!e)return;const t=e.trim();if(!t)return;if("auto"===t)return{flexGrow:1,flexShrink:1,flexBasis:"auto"};if("none"===t)return{flexGrow:0,flexShrink:0,flexBasis:"auto"};const r=Number(t);if((0,_utils.isNumber)(r))return{flex:r};const i=t.split(/\s+/);if(i.length>=2){const[e,t]=i.map(Number);if((0,_utils.isNumber)(e)&&(0,_utils.isNumber)(t)){const r=i.slice(2).join(" ");let n;if("auto"===r)n="auto";else if(r){const e=r.match(/^(-?\d+(?:\.\d+)?)px$/),t=Number(e?e[1]:r);(0,_utils.isNumber)(t)&&(n=t)}return{flexGrow:e,flexShrink:t,flexBasis:n}}}},FlexItemImpl=({span:e,flex:t,style:r,children:i})=>{const{horizontalGap:n,verticalGap:l,columns:u}=(0,_react().useContext)(_FlexContext.FlexContext),a="web"===_reactNative().Platform.OS;if((0,_utils.isNumber)(e)&&e<=0)return null;const o={};if((0,_utils.isNumber)(e)){const t=Math.max(1,u),r=Math.min(Math.max(e,0),t)/t;o.width=100*r+"%",o.flexGrow=0,o.flexShrink=0}return _react().default.createElement(_reactNative().View,{style:[a?null:{paddingHorizontal:n/2,paddingVertical:l/2},o,parseFlex(t),r]},i)},FlexItem=exports.FlexItem=_react().default.memo(FlexItemImpl);FlexItem.displayName="FlexItem";

package/dist/cjs/components/flex/index.js

@@ -1,19 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Flex = void 0;
-Object.defineProperty(exports, "FlexItem", {
-  enumerable: true,
-  get: function () {
-    return _FlexItem.FlexItem;
-  }
-});
-exports.default = void 0;
-var _Flex = require("./Flex");
-var _FlexItem = require("./FlexItem");
-const Flex = exports.Flex = Object.assign(_Flex.Flex, {
-  Item: _FlexItem.FlexItem
-});
-var _default = exports.default = Flex;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Flex=void 0,Object.defineProperty(exports,"FlexItem",{enumerable:!0,get:function(){return _FlexItem.FlexItem}}),exports.default=void 0;var _Flex=require("./Flex"),_FlexItem=require("./FlexItem");const Flex=exports.Flex=Object.assign(_Flex.Flex,{Item:_FlexItem.FlexItem});var _default=exports.default=Flex;

package/dist/cjs/components/flex/tokens.js

@@ -1,21 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFlexTokens = void 0;
-var _designSystem = require("../../design-system");
-const createFlexTokens = _foundations => ({
-  defaults: {
-    direction: 'row',
-    wrap: 'nowrap',
-    gutter: 0,
-    align: 'start',
-    justify: 'start',
-    columns: 24
-  },
-  layout: {
-    container: {}
-  }
-});
-const useFlexTokens = exports.useFlexTokens = (0, _designSystem.createComponentTokensHook)('flex', createFlexTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFlexTokens=void 0;var _designSystem=require("../../design-system");const createFlexTokens=e=>({defaults:{direction:"row",wrap:"nowrap",gutter:0,align:"start",justify:"start",columns:24},layout:{container:{}}}),useFlexTokens=exports.useFlexTokens=(0,_designSystem.createComponentTokensHook)("flex",createFlexTokens);