react-native-system-ui 1.0.1 → 1.0.3

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

@@ -1,25 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TabPane", {
-  enumerable: true,
-  get: function () {
-    return _Tabs.TabPane;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "useTabsTokens", {
-  enumerable: true,
-  get: function () {
-    return _tokens.useTabsTokens;
-  }
-});
-var _Tabs = _interopRequireWildcard(require("./Tabs"));
-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 Tabs = Object.assign(_Tabs.default, {
-  TabPane: _Tabs.TabPane
-});
-var _default = exports.default = Tabs;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"TabPane",{enumerable:!0,get:function(){return _Tabs.TabPane}}),exports.default=void 0,Object.defineProperty(exports,"useTabsTokens",{enumerable:!0,get:function(){return _tokens.useTabsTokens}});var _Tabs=_interopRequireWildcard(require("./Tabs")),_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 a,o,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?n:r){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?a(s,t,o):s[t]=e[t]);return s})(e,t)}const Tabs=Object.assign(_Tabs.default,{TabPane:_Tabs.TabPane});var _default=exports.default=Tabs;

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

@@ -1,111 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTabsTokens = void 0;
-var _designSystem = require("../../design-system");
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    radii,
-    typography
-  } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
-  return {
-    defaults: {
-      type: 'line',
-      align: 'center',
-      ellipsis: true,
-      swipeThreshold: 5,
-      animated: true,
-      duration: 300,
-      lazyRender: true
-    },
-    colors: {
-      text: palette.default[700],
-      textActive: palette.primary[600],
-      textDisabled: palette.default[400],
-      description: palette.default[500],
-      descriptionActive: palette.default[600],
-      descriptionBackground: palette.default[100],
-      descriptionActiveBackground: palette.primary[600],
-      border: palette.default[200],
-      indicator: palette.primary[600],
-      cardBackground: '#ffffff',
-      cardActiveBackground: palette.primary[600],
-      cardBorder: palette.primary[600],
-      cardActiveBorder: palette.primary[600],
-      cardActiveText: onPrimary,
-      capsuleBackground: 'transparent',
-      capsuleActiveBackground: palette.primary[600],
-      capsuleBorder: 'transparent',
-      capsuleActiveBorder: 'transparent',
-      capsuleText: palette.default[700],
-      capsuleActiveText: onPrimary,
-      badgeText: palette.default[500],
-      jumboBackground: palette.default[50],
-      jumboActiveBackground: '#ffffff',
-      jumboBorder: 'transparent',
-      jumboActiveBorder: palette.primary[400],
-      jumboDescription: palette.default[500],
-      jumboDescriptionActive: onPrimary,
-      jumboDescriptionBackground: palette.default[100],
-      jumboDescriptionActiveBackground: palette.primary[500]
-    },
-    tabList: {
-      height: 44,
-      paddingHorizontal: spacing.lg,
-      paddingVertical: 0,
-      paddingBottom: spacing.md,
-      background: '#ffffff'
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      titleSize: fontSize.sm,
-      titleWeight: foundations.typography.weight.medium,
-      titleActiveWeight: foundations.typography.weight.semiBold,
-      descriptionSize: fontSize.xs,
-      jumboTitleSize: fontSize.md,
-      jumboLineHeight: Math.round(fontSize.md * 1.6),
-      badgeTextSize: fontSize.xxs
-    },
-    spacing: {
-      navSidePaddingHorizontal: spacing.sm,
-      navBottomMarginTop: spacing.sm,
-      descriptionMarginTop: spacing.xxs,
-      jumboDescriptionMarginTop: spacing.sm,
-      badgeMarginTop: spacing.xs
-    },
-    indicator: {
-      height: 3,
-      radius: 999,
-      width: 40,
-      offset: spacing.md
-    },
-    card: {
-      radius: radii.xs,
-      paddingHorizontal: spacing.sm,
-      paddingVertical: spacing.xs,
-      height: 30,
-      marginHorizontal: spacing.md
-    },
-    capsule: {
-      radius: 999,
-      paddingHorizontal: spacing.sm,
-      paddingVertical: spacing.ssm
-    },
-    jumbo: {
-      radius: 16,
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.sm,
-      height: 64,
-      descriptionPaddingHorizontal: spacing.sm,
-      descriptionPaddingVertical: spacing.xxs,
-      descriptionRadius: 10
-    }
-  };
-};
-const useTabsTokens = exports.useTabsTokens = (0, _designSystem.createComponentTokensHook)('tabs', createTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useTabsTokens=void 0;var _designSystem=require("../../design-system");const createTokens=e=>{const{palette:i,spacing:t,fontSize:r,radii:a,typography:d}=e,o=i.primary.foreground??"#ffffff";return{defaults:{type:"line",align:"center",ellipsis:!0,swipeThreshold:5,animated:!0,duration:300,lazyRender:!0},colors:{text:i.default[700],textActive:i.primary[600],textDisabled:i.default[400],description:i.default[500],descriptionActive:i.default[600],descriptionBackground:i.default[100],descriptionActiveBackground:i.primary[600],border:i.default[200],indicator:i.primary[600],cardBackground:"#ffffff",cardActiveBackground:i.primary[600],cardBorder:i.primary[600],cardActiveBorder:i.primary[600],cardActiveText:o,capsuleBackground:"transparent",capsuleActiveBackground:i.primary[600],capsuleBorder:"transparent",capsuleActiveBorder:"transparent",capsuleText:i.default[700],capsuleActiveText:o,badgeText:i.default[500],jumboBackground:i.default[50],jumboActiveBackground:"#ffffff",jumboBorder:"transparent",jumboActiveBorder:i.primary[400],jumboDescription:i.default[500],jumboDescriptionActive:o,jumboDescriptionBackground:i.default[100],jumboDescriptionActiveBackground:i.primary[500]},tabList:{height:44,paddingHorizontal:t.lg,paddingVertical:0,paddingBottom:t.md,background:"#ffffff"},typography:{fontFamily:d.fontFamily,titleSize:r.sm,titleWeight:e.typography.weight.medium,titleActiveWeight:e.typography.weight.semiBold,descriptionSize:r.xs,jumboTitleSize:r.md,jumboLineHeight:Math.round(1.6*r.md),badgeTextSize:r.xxs},spacing:{navSidePaddingHorizontal:t.sm,navBottomMarginTop:t.sm,descriptionMarginTop:t.xxs,jumboDescriptionMarginTop:t.sm,badgeMarginTop:t.xs},indicator:{height:3,radius:999,width:40,offset:t.md},card:{radius:a.xs,paddingHorizontal:t.sm,paddingVertical:t.xs,height:30,marginHorizontal:t.md},capsule:{radius:999,paddingHorizontal:t.sm,paddingVertical:t.ssm},jumbo:{radius:16,paddingHorizontal:t.md,paddingVertical:t.sm,height:64,descriptionPaddingHorizontal:t.sm,descriptionPaddingVertical:t.xxs,descriptionRadius:10}}},useTabsTokens=exports.useTabsTokens=(0,_designSystem.createComponentTokensHook)("tabs",createTokens);

package/dist/cjs/components/tag/Tag.js

@@ -1,130 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tag = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNativeSystemIcon() {
-  const data = require("react-native-system-icon");
-  _reactNativeSystemIcon = function () {
-    return data;
-  };
-  return data;
-}
-var _utils = require("../../utils");
-var _validate = require("../../utils/validate");
-var _useDirection = require("../config-provider/useDirection");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 TagImpl = props => {
-  const {
-    tokensOverride,
-    children,
-    type: typeP,
-    size: sizeP,
-    plain: plainP,
-    round: roundP,
-    mark: markP,
-    color,
-    textColor,
-    show: showP,
-    closeable,
-    closeIcon,
-    onClose,
-    onPress,
-    textStyle,
-    style,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useTagTokens)(tokensOverride);
-  const dir = (0, _useDirection.useDirection)();
-  const type = typeP ?? tokens.defaults.type;
-  const size = sizeP ?? tokens.defaults.size;
-  const plain = plainP ?? tokens.defaults.plain;
-  const round = roundP ?? tokens.defaults.round;
-  const mark = markP ?? tokens.defaults.mark;
-  const show = showP ?? tokens.defaults.show;
-  if (!show) return null;
-  const tone = tokens.colors.toneMap[type] ?? tokens.colors.toneMap.default;
-  const szTok = tokens.sizing.sizes[size];
-  const bgClr = plain ? tokens.colors.plainBackground : color ?? tone.background;
-  const txtClr = textColor ?? (plain ? color ?? tone.background : tone.text);
-  const borderClr = plain ? color ?? tone.background : 'transparent';
-  const radius = round ? tokens.radii.round : szTok.borderRadius;
-  const markR = mark ? dir === 'rtl' ? {
-    borderTopRightRadius: tokens.radii.markLeading,
-    borderBottomRightRadius: tokens.radii.markLeading,
-    borderTopLeftRadius: tokens.radii.round,
-    borderBottomLeftRadius: tokens.radii.round
-  } : {
-    borderTopLeftRadius: tokens.radii.markLeading,
-    borderBottomLeftRadius: tokens.radii.markLeading,
-    borderTopRightRadius: tokens.radii.round,
-    borderBottomRightRadius: tokens.radii.round
-  } : null;
-  const resRadius = mark ? tokens.radii.round : radius;
-  const ctrStyle = [tokens.layout.container, {
-    backgroundColor: bgClr,
-    paddingHorizontal: szTok.paddingHorizontal,
-    paddingVertical: szTok.paddingVertical,
-    borderRadius: radius
-  }, markR, style];
-  const label = !(0, _validate.isRenderable)(children) ? null : (0, _utils.renderTextOrNode)(children, [{
-    color: txtClr,
-    fontSize: szTok.fontSize,
-    lineHeight: szTok.lineHeight,
-    fontFamily: tokens.typography.fontFamily,
-    fontWeight: tokens.typography.fontWeight
-  }, textStyle].filter(Boolean));
-  const close = closeable && /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-    accessibilityRole: "button",
-    hitSlop: tokens.spacing.closeHitSlop,
-    style: [tokens.layout.close, {
-      marginLeft: tokens.spacing.closeGap
-    }],
-    onPress: e => {
-      e.stopPropagation?.();
-      onClose?.();
-    }
-  }, (0, _utils.isFunction)(closeIcon) ? closeIcon(txtClr, tokens.sizing.closeIconSize) : closeIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
-    color: txtClr,
-    size: tokens.sizing.closeIconSize
-  }));
-  const hlOverlay = plain ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: (0, _utils.createHairlineView)({
-      position: 'all',
-      color: borderClr,
-      borderRadius: resRadius
-    })
-  }) : null;
-  const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, label, close, hlOverlay);
-  if (onPress) return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    accessibilityRole: "button",
-    onPress: onPress,
-    style: ({
-      pressed
-    }) => [ctrStyle, pressed && {
-      opacity: tokens.defaults.pressedOpacity
-    }]
-  }, rest), content);
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    style: ctrStyle
-  }, rest), content);
-};
-const Tag = exports.Tag = /*#__PURE__*/_react().default.memo(TagImpl);
-Tag.displayName = 'Tag';
+"use strict";function _react(){const e=_interopRequireDefault(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}function _reactNativeSystemIcon(){const e=require("react-native-system-icon");return _reactNativeSystemIcon=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tag=void 0;var _utils=require("../../utils"),_validate=require("../../utils/validate"),_useDirection=require("../config-provider/useDirection"),_tokens=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}const TagImpl=e=>{const{tokensOverride:t,children:r,type:a,size:i,plain:o,round:n,mark:s,color:l,textColor:u,show:d,closeable:c,closeIcon:f,onClose:p,onPress:g,textStyle:_,style:m,...y}=e,b=(0,_tokens.useTagTokens)(t),v=(0,_useDirection.useDirection)(),R=a??b.defaults.type,h=i??b.defaults.size,k=o??b.defaults.plain,T=n??b.defaults.round,z=s??b.defaults.mark;if(!(d??b.defaults.show))return null;const x=b.colors.toneMap[R]??b.colors.toneMap.default,N=b.sizing.sizes[h],S=k?b.colors.plainBackground:l??x.background,q=u??(k?l??x.background:x.text),L=k?l??x.background:"transparent",I=T?b.radii.round:N.borderRadius,P=z?"rtl"===v?{borderTopRightRadius:b.radii.markLeading,borderBottomRightRadius:b.radii.markLeading,borderTopLeftRadius:b.radii.round,borderBottomLeftRadius:b.radii.round}:{borderTopLeftRadius:b.radii.markLeading,borderBottomLeftRadius:b.radii.markLeading,borderTopRightRadius:b.radii.round,borderBottomRightRadius:b.radii.round}:null,O=z?b.radii.round:I,w=[b.layout.container,{backgroundColor:S,paddingHorizontal:N.paddingHorizontal,paddingVertical:N.paddingVertical,borderRadius:I},P,m],B=(0,_validate.isRenderable)(r)?(0,_utils.renderTextOrNode)(r,[{color:q,fontSize:N.fontSize,lineHeight:N.lineHeight,fontFamily:b.typography.fontFamily,fontWeight:b.typography.fontWeight},_].filter(Boolean)):null,D=c&&_react().default.createElement(_reactNative().Pressable,{accessibilityRole:"button",hitSlop:b.spacing.closeHitSlop,style:[b.layout.close,{marginLeft:b.spacing.closeGap}],onPress:e=>{e.stopPropagation?.(),p?.()}},(0,_utils.isFunction)(f)?f(q,b.sizing.closeIconSize):f??_react().default.createElement(_reactNativeSystemIcon().Close,{color:q,size:b.sizing.closeIconSize})),E=k?_react().default.createElement(_reactNative().View,{style:(0,_utils.createHairlineView)({position:"all",color:L,borderRadius:O})}):null,H=_react().default.createElement(_react().default.Fragment,null,B,D,E);return g?_react().default.createElement(_reactNative().Pressable,_extends({accessibilityRole:"button",onPress:g,style:({pressed:e})=>[w,e&&{opacity:b.defaults.pressedOpacity}]},y),H):_react().default.createElement(_reactNative().View,_extends({style:w},y),H)},Tag=exports.Tag=_react().default.memo(TagImpl);Tag.displayName="Tag";

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

@@ -1,8 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Tag = require("./Tag");
-var _default = exports.default = _Tag.Tag;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _Tag=require("./Tag"),_default=exports.default=_Tag.Tag;

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

@@ -1,104 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTagTokens = exports.createTagTokens = void 0;
-var _designSystem = require("../../design-system");
-var _utils = require("../../utils");
-const buildTone = (palette, key, fallbackText) => ({
-  background: palette[key][500],
-  text: fallbackText ?? palette[key].foreground ?? '#ffffff'
-});
-const createTagTokens = foundations => {
-  const {
-    palette,
-    radii,
-    typography,
-    opacity,
-    spacing
-  } = foundations;
-  return {
-    defaults: {
-      type: 'default',
-      size: 'small',
-      plain: false,
-      round: false,
-      mark: false,
-      show: true,
-      pressedOpacity: opacity.pressed
-    },
-    layout: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        alignSelf: 'flex-start'
-      },
-      close: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    },
-    colors: {
-      plainBackground: '#ffffff',
-      toneMap: {
-        default: buildTone(palette, 'default', '#ffffff'),
-        primary: buildTone(palette, 'primary'),
-        success: buildTone(palette, 'success'),
-        warning: buildTone(palette, 'warning', palette.warning.foreground ?? palette.warning[900]),
-        danger: buildTone(palette, 'danger')
-      }
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      lineHeightMultiplier: typography.lineHeightMultiplier,
-      fontWeight: typography.weight.medium
-    },
-    sizing: {
-      sizes: {
-        mini: {
-          fontSize: 10,
-          paddingHorizontal: 4,
-          paddingVertical: 0,
-          borderRadius: 2,
-          lineHeight: 16
-        },
-        small: {
-          fontSize: 12,
-          paddingHorizontal: 4,
-          paddingVertical: 0,
-          borderRadius: 2,
-          lineHeight: 16
-        },
-        medium: {
-          fontSize: 12,
-          paddingHorizontal: 6,
-          paddingVertical: 2,
-          borderRadius: 4,
-          lineHeight: 16
-        },
-        large: {
-          fontSize: 14,
-          paddingHorizontal: 8,
-          paddingVertical: 4,
-          borderRadius: 4,
-          lineHeight: 16
-        }
-      },
-      closeIconSize: 12
-    },
-    radii: {
-      round: radii.pill,
-      markLeading: radii.none
-    },
-    borders: {
-      width: (0, _utils.getHairlineWidth)()
-    },
-    spacing: {
-      closeGap: 2,
-      closeHitSlop: spacing.sm
-    }
-  };
-};
-exports.createTagTokens = createTagTokens;
-const useTagTokens = exports.useTagTokens = (0, _designSystem.createComponentTokensHook)('tag', createTagTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useTagTokens=exports.createTagTokens=void 0;var _designSystem=require("../../design-system"),_utils=require("../../utils");const buildTone=(e,i,n)=>({background:e[i][500],text:n??e[i].foreground??"#ffffff"}),createTagTokens=e=>{const{palette:i,radii:n,typography:t,opacity:a,spacing:o}=e;return{defaults:{type:"default",size:"small",plain:!1,round:!1,mark:!1,show:!0,pressedOpacity:a.pressed},layout:{container:{flexDirection:"row",alignItems:"center",alignSelf:"flex-start"},close:{alignItems:"center",justifyContent:"center"}},colors:{plainBackground:"#ffffff",toneMap:{default:buildTone(i,"default","#ffffff"),primary:buildTone(i,"primary"),success:buildTone(i,"success"),warning:buildTone(i,"warning",i.warning.foreground??i.warning[900]),danger:buildTone(i,"danger")}},typography:{fontFamily:t.fontFamily,lineHeightMultiplier:t.lineHeightMultiplier,fontWeight:t.weight.medium},sizing:{sizes:{mini:{fontSize:10,paddingHorizontal:4,paddingVertical:0,borderRadius:2,lineHeight:16},small:{fontSize:12,paddingHorizontal:4,paddingVertical:0,borderRadius:2,lineHeight:16},medium:{fontSize:12,paddingHorizontal:6,paddingVertical:2,borderRadius:4,lineHeight:16},large:{fontSize:14,paddingHorizontal:8,paddingVertical:4,borderRadius:4,lineHeight:16}},closeIconSize:12},radii:{round:n.pill,markLeading:n.none},borders:{width:(0,_utils.getHairlineWidth)()},spacing:{closeGap:2,closeHitSlop:o.sm}}};exports.createTagTokens=createTagTokens;const useTagTokens=exports.useTagTokens=(0,_designSystem.createComponentTokensHook)("tag",createTagTokens);