react-native-system-ui 1.0.2 → 1.0.4

package/dist/cjs/components/area/Area.js

@@ -1,127 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-var _picker = _interopRequireDefault(require("../picker"));
-var _tokens = require("./tokens");
-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 sortEntries = record => record ? Object.entries(record).sort(([a], [b]) => a.localeCompare(b)) : [];
-const getProvinceCode = code => code.slice(0, 2);
-const getCityCode = code => code.slice(0, 4);
-const groupBy = (list, getKey) => {
-  const m = new Map();
-  sortEntries(list).forEach(([code, name]) => {
-    const k = getKey(code);
-    const arr = m.get(k);
-    if (arr) arr.push({
-      label: name,
-      value: code
-    });else m.set(k, [{
-      label: name,
-      value: code
-    }]);
-  });
-  return m;
-};
-const buildAreaColumns = (areaList, columnsNum = 3) => {
-  const provinces = sortEntries(areaList.province_list);
-  if (columnsNum === 1) return provinces.map(([code, name]) => ({
-    label: name,
-    value: code
-  }));
-  const citiesByProvince = groupBy(areaList.city_list, getProvinceCode);
-  if (columnsNum === 3) {
-    const countiesByCity = groupBy(areaList.county_list, getCityCode);
-    citiesByProvince.forEach(cityOption => {
-      cityOption.forEach(cityOption2 => {
-        const cityKey = getCityCode(cityOption2.value);
-        const counties = countiesByCity.get(cityKey);
-        if (counties && counties.length) cityOption2.children = counties;
-      });
-    });
-  }
-  return provinces.map(([code, name]) => {
-    const provinceOption = {
-      label: name,
-      value: code
-    };
-    const provinceKey = getProvinceCode(code);
-    const cities = citiesByProvince.get(provinceKey);
-    if (cities && cities.length) provinceOption.children = cities;
-    return provinceOption;
-  });
-};
-const normalizeCascadeValue = (root, rawValue, depth) => {
-  if (!rawValue) return rawValue;
-  const inputArray = Array.isArray(rawValue) ? rawValue.map(String) : [String(rawValue)];
-  const result = [];
-  let options = root;
-  for (let i = 0; i < depth; i += 1) {
-    if (!options?.length) break;
-    const wantedValue = inputArray[i];
-    const nextOption = options.find(option => String(option.value) === wantedValue) ?? options[0];
-    if (!nextOption) break;
-    result.push(String(nextOption.value));
-    options = nextOption.children;
-  }
-  return result;
-};
-const AreaImpl = props => {
-  const tokens = (0, _tokens.useAreaTokens)();
-  const {
-    areaList,
-    columnsNum: colP = tokens.defaults.columnsNum,
-    value,
-    defaultValue,
-    onChange,
-    onConfirm,
-    interactionMode: modeP = tokens.defaults.interactionMode,
-    ...rest
-  } = props;
-  const cols = (0, _react().useMemo)(() => colP >= 1 && colP <= 3 ? colP : tokens.defaults.columnsNum, [colP]);
-  const {
-    province_list,
-    city_list,
-    county_list
-  } = areaList;
-  const columns = (0, _react().useMemo)(() => buildAreaColumns({
-    province_list,
-    city_list,
-    county_list
-  }, cols), [city_list, county_list, province_list, cols]);
-  const norm = (0, _react().useCallback)(val => val === undefined ? undefined : normalizeCascadeValue(columns, val, cols), [columns, cols]);
-  const normVal = (0, _react().useMemo)(() => norm(value), [norm, value]);
-  const normDef = (0, _react().useMemo)(() => norm(defaultValue), [norm, defaultValue]);
-  const onChangeRef = (0, _react().useRef)(onChange);
-  onChangeRef.current = onChange;
-  const onConfirmRef = (0, _react().useRef)(onConfirm);
-  onConfirmRef.current = onConfirm;
-  const onCh = (0, _react().useCallback)((values, opts) => {
-    onChangeRef.current?.(values.map(String), opts);
-  }, []);
-  const onConf = (0, _react().useCallback)((values, opts) => {
-    onConfirmRef.current?.(values.map(String), opts);
-  }, []);
-  return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, rest, {
-    columns: columns,
-    interactionMode: modeP,
-    value: normVal,
-    defaultValue: normDef,
-    onChange: onChange ? onCh : undefined,
-    onConfirm: onConfirm ? onConf : undefined
-  }));
-};
-const Area = /*#__PURE__*/_react().default.memo(AreaImpl);
-Area.displayName = 'Area';
-var _default = exports.default = Area;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _picker=_interopRequireDefault(require("../picker")),_tokens=require("./tokens");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 a,o,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(a=t?n:r){if(a.has(e))return a.get(e);a.set(e,u)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?a(u,t,o):u[t]=e[t]);return u})(e,t)}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 n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}const sortEntries=e=>e?Object.entries(e).sort(([e],[t])=>e.localeCompare(t)):[],getProvinceCode=e=>e.slice(0,2),getCityCode=e=>e.slice(0,4),groupBy=(e,t)=>{const r=new Map;return sortEntries(e).forEach(([e,n])=>{const a=t(e),o=r.get(a);o?o.push({label:n,value:e}):r.set(a,[{label:n,value:e}])}),r},buildAreaColumns=(e,t=3)=>{const r=sortEntries(e.province_list);if(1===t)return r.map(([e,t])=>({label:t,value:e}));const n=groupBy(e.city_list,getProvinceCode);if(3===t){const t=groupBy(e.county_list,getCityCode);n.forEach(e=>{e.forEach(e=>{const r=getCityCode(e.value),n=t.get(r);n&&n.length&&(e.children=n)})})}return r.map(([e,t])=>{const r={label:t,value:e},a=getProvinceCode(e),o=n.get(a);return o&&o.length&&(r.children=o),r})},normalizeCascadeValue=(e,t,r)=>{if(!t)return t;const n=Array.isArray(t)?t.map(String):[String(t)],a=[];let o=e;for(let e=0;e<r&&o?.length;e+=1){const t=n[e],r=o.find(e=>String(e.value)===t)??o[0];if(!r)break;a.push(String(r.value)),o=r.children}return a},AreaImpl=e=>{const t=(0,_tokens.useAreaTokens)(),{areaList:r,columnsNum:n=t.defaults.columnsNum,value:a,defaultValue:o,onChange:u,onConfirm:i,interactionMode:l=t.defaults.interactionMode,...c}=e,s=(0,_react().useMemo)(()=>n>=1&&n<=3?n:t.defaults.columnsNum,[n]),{province_list:d,city_list:f,county_list:_}=r,p=(0,_react().useMemo)(()=>buildAreaColumns({province_list:d,city_list:f,county_list:_},s),[f,_,d,s]),g=(0,_react().useCallback)(e=>void 0===e?void 0:normalizeCascadeValue(p,e,s),[p,s]),m=(0,_react().useMemo)(()=>g(a),[g,a]),v=(0,_react().useMemo)(()=>g(o),[g,o]),y=(0,_react().useRef)(u);y.current=u;const C=(0,_react().useRef)(i);C.current=i;const b=(0,_react().useCallback)((e,t)=>{y.current?.(e.map(String),t)},[]),h=(0,_react().useCallback)((e,t)=>{C.current?.(e.map(String),t)},[]);return _react().default.createElement(_picker.default,_extends({},c,{columns:p,interactionMode:l,value:m,defaultValue:v,onChange:u?b:void 0,onConfirm:i?h:void 0}))},Area=_react().default.memo(AreaImpl);Area.displayName="Area";var _default=exports.default=Area;

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

@@ -1,9 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Area = _interopRequireDefault(require("./Area"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Area.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _Area=_interopRequireDefault(require("./Area"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=_Area.default;

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

@@ -1,14 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAreaTokens = void 0;
-var _designSystem = require("../../design-system");
-const createAreaTokens = _foundations => ({
-  defaults: {
-    columnsNum: 3,
-    interactionMode: 'sync'
-  }
-});
-const useAreaTokens = exports.useAreaTokens = (0, _designSystem.createComponentTokensHook)('area', createAreaTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useAreaTokens=void 0;var _designSystem=require("../../design-system");const createAreaTokens=e=>({defaults:{columnsNum:3,interactionMode:"sync"}}),useAreaTokens=exports.useAreaTokens=(0,_designSystem.createComponentTokensHook)("area",createAreaTokens);

package/dist/cjs/components/avatar/Avatar.js

@@ -1,125 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AvatarImage = exports.AvatarFallbackText = exports.Avatar = 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;
-}
-var _image = _interopRequireDefault(require("../image"));
-var _utils = require("../../utils");
-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 AvatarFallbackText = exports.AvatarFallbackText = /*#__PURE__*/_react().default.forwardRef(({
-  children,
-  color,
-  style
-}, ref) => {
-  const tokens = (0, _tokens.useAvatarTokens)();
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    ref: ref,
-    style: _reactNative().StyleSheet.flatten([tokens.layout.text, {
-      color: color ?? tokens.colors.text,
-      fontWeight: tokens.typography.fontWeight
-    }, style]),
-    numberOfLines: 1
-  }, children);
-});
-AvatarFallbackText.displayName = 'Avatar.FallbackText';
-const AvatarImage = exports.AvatarImage = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
-  const tokens = (0, _tokens.useAvatarTokens)();
-  return /*#__PURE__*/_react().default.createElement(_image.default, _extends({
-    ref: ref
-  }, props, {
-    containerStyle: [{
-      backgroundColor: tokens.colors.transparent
-    }, props.containerStyle],
-    style: [tokens.layout.image, props.style],
-    fit: props.fit ?? 'cover',
-    loadingText: props.loadingText ?? null,
-    loadingSize: props.loadingSize ?? tokens.sizing.loadingSize,
-    showError: props.showError ?? true
-  }));
-});
-AvatarImage.displayName = 'Avatar.Image';
-const AvatarImpl = (props, ref) => {
-  const {
-    src,
-    source,
-    icon,
-    text,
-    size: szP,
-    width: wP,
-    height: hP,
-    shape: shapeP,
-    fit: fitP,
-    color,
-    backgroundColor,
-    style,
-    textStyle,
-    contentStyle,
-    children,
-    tokensOverride,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useAvatarTokens)(tokensOverride);
-  const rSz = szP ?? tokens.defaults.size;
-  const rShape = shapeP ?? tokens.defaults.shape;
-  const base = (0, _utils.isNumber)(rSz) ? rSz : tokens.sizing.sizes[rSz];
-  const w = wP ?? base;
-  const h = hP ?? base;
-  const radius = rShape === 'circle' ? Math.min(w, h) / 2 : Math.max(tokens.radii.squareMin, Math.min(w, h) / tokens.radii.squareDivisor);
-  const transStyle = {
-    backgroundColor: tokens.colors.transparent
-  };
-  const fallback = icon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.iconWrapper, {
-      width: Math.min(w, tokens.sizing.iconMaxSize),
-      height: Math.min(h, tokens.sizing.iconMaxSize)
-    }, contentStyle]
-  }, icon) : text && /*#__PURE__*/_react().default.createElement(AvatarFallbackText, {
-    color: color,
-    style: [{
-      fontSize: Math.min(w, h) * tokens.typography.fallbackTextScale
-    }, textStyle]
-  }, text.trim().slice(0, 2).toUpperCase());
-  const content = children ?? (src || source ? /*#__PURE__*/_react().default.createElement(AvatarImage, {
-    src: src,
-    source: source,
-    containerStyle: transStyle,
-    style: tokens.layout.image,
-    fit: fitP ?? 'cover',
-    loadingText: null,
-    loadingSize: tokens.sizing.loadingSize,
-    showError: true,
-    fallback: fallback
-  }) : fallback);
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    ref: ref,
-    accessibilityRole: "image",
-    accessibilityLabel: text ?? (src ? 'avatar' : undefined),
-    style: [tokens.layout.container, {
-      width: w,
-      height: h,
-      borderRadius: radius,
-      backgroundColor: backgroundColor ?? tokens.colors.background
-    }, style]
-  }, rest), content);
-};
-const AvatarForwardRef = /*#__PURE__*/_react().default.forwardRef(AvatarImpl);
-AvatarForwardRef.displayName = 'Avatar';
-const Avatar = exports.Avatar = /*#__PURE__*/_react().default.memo(AvatarForwardRef);
-var _default = exports.default = Avatar;
+"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}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.AvatarImage=exports.AvatarFallbackText=exports.Avatar=void 0;var _image=_interopRequireDefault(require("../image")),_utils=require("../../utils"),_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 a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}const AvatarFallbackText=exports.AvatarFallbackText=_react().default.forwardRef(({children:e,color:t,style:a},r)=>{const i=(0,_tokens.useAvatarTokens)();return _react().default.createElement(_reactNative().Text,{ref:r,style:_reactNative().StyleSheet.flatten([i.layout.text,{color:t??i.colors.text,fontWeight:i.typography.fontWeight},a]),numberOfLines:1},e)});AvatarFallbackText.displayName="Avatar.FallbackText";const AvatarImage=exports.AvatarImage=_react().default.forwardRef((e,t)=>{const a=(0,_tokens.useAvatarTokens)();return _react().default.createElement(_image.default,_extends({ref:t},e,{containerStyle:[{backgroundColor:a.colors.transparent},e.containerStyle],style:[a.layout.image,e.style],fit:e.fit??"cover",loadingText:e.loadingText??null,loadingSize:e.loadingSize??a.sizing.loadingSize,showError:e.showError??!0}))});AvatarImage.displayName="Avatar.Image";const AvatarImpl=(e,t)=>{const{src:a,source:r,icon:i,text:o,size:n,width:l,height:s,shape:c,fit:u,color:d,backgroundColor:f,style:v,textStyle:g,contentStyle:_,children:m,tokensOverride:p,...x}=e,y=(0,_tokens.useAvatarTokens)(p),h=n??y.defaults.size,A=c??y.defaults.shape,b=(0,_utils.isNumber)(h)?h:y.sizing.sizes[h],k=l??b,z=s??b,S="circle"===A?Math.min(k,z)/2:Math.max(y.radii.squareMin,Math.min(k,z)/y.radii.squareDivisor),w={backgroundColor:y.colors.transparent},T=i?_react().default.createElement(_reactNative().View,{style:[y.layout.iconWrapper,{width:Math.min(k,y.sizing.iconMaxSize),height:Math.min(z,y.sizing.iconMaxSize)},_]},i):o&&_react().default.createElement(AvatarFallbackText,{color:d,style:[{fontSize:Math.min(k,z)*y.typography.fallbackTextScale},g]},o.trim().slice(0,2).toUpperCase()),M=m??(a||r?_react().default.createElement(AvatarImage,{src:a,source:r,containerStyle:w,style:y.layout.image,fit:u??"cover",loadingText:null,loadingSize:y.sizing.loadingSize,showError:!0,fallback:T}):T);return _react().default.createElement(_reactNative().Pressable,_extends({ref:t,accessibilityRole:"image",accessibilityLabel:o??(a?"avatar":void 0),style:[y.layout.container,{width:k,height:z,borderRadius:S,backgroundColor:f??y.colors.background},v]},x),M)},AvatarForwardRef=_react().default.forwardRef(AvatarImpl);AvatarForwardRef.displayName="Avatar";const Avatar=exports.Avatar=_react().default.memo(AvatarForwardRef);var _default=exports.default=Avatar;

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

@@ -1,18 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Avatar", {
-  enumerable: true,
-  get: function () {
-    return _Avatar.Avatar;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Avatar.Avatar;
-  }
-});
-var _Avatar = require("./Avatar");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Avatar",{enumerable:!0,get:function(){return _Avatar.Avatar}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Avatar.Avatar}});var _Avatar=require("./Avatar");

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

@@ -1,56 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAvatarTokens = exports.createAvatarTokens = void 0;
-var _designSystem = require("../../design-system");
-const createAvatarTokens = foundations => ({
-  defaults: {
-    size: "medium",
-    shape: "circle"
-  },
-  layout: {
-    container: {
-      alignItems: "center",
-      justifyContent: "center",
-      overflow: "hidden"
-    },
-    text: {
-      includeFontPadding: false,
-      textAlignVertical: "center"
-    },
-    image: {
-      width: "100%",
-      height: "100%"
-    },
-    iconWrapper: {
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  },
-  colors: {
-    background: foundations.palette.default[100],
-    text: foundations.palette.default[800],
-    transparent: "transparent"
-  },
-  typography: {
-    fontWeight: "600",
-    fallbackTextScale: 0.5
-  },
-  sizing: {
-    sizes: {
-      small: 24,
-      medium: 32,
-      large: 40
-    },
-    iconMaxSize: 32,
-    loadingSize: 12
-  },
-  radii: {
-    squareMin: 6,
-    squareDivisor: 6
-  }
-});
-exports.createAvatarTokens = createAvatarTokens;
-const useAvatarTokens = exports.useAvatarTokens = (0, _designSystem.createComponentTokensHook)("avatar", createAvatarTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useAvatarTokens=exports.createAvatarTokens=void 0;var _designSystem=require("../../design-system");const createAvatarTokens=e=>({defaults:{size:"medium",shape:"circle"},layout:{container:{alignItems:"center",justifyContent:"center",overflow:"hidden"},text:{includeFontPadding:!1,textAlignVertical:"center"},image:{width:"100%",height:"100%"},iconWrapper:{alignItems:"center",justifyContent:"center"}},colors:{background:e.palette.default[100],text:e.palette.default[800],transparent:"transparent"},typography:{fontWeight:"600",fallbackTextScale:.5},sizing:{sizes:{small:24,medium:32,large:40},iconMaxSize:32,loadingSize:12},radii:{squareMin:6,squareDivisor:6}});exports.createAvatarTokens=createAvatarTokens;const useAvatarTokens=exports.useAvatarTokens=(0,_designSystem.createComponentTokensHook)("avatar",createAvatarTokens);

package/dist/cjs/components/badge/Badge.js

@@ -1,166 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Badge = 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 _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 BadgeImpl = (props, ref) => {
-  const {
-    children,
-    content,
-    color,
-    textColor,
-    dot: dotP,
-    max,
-    offset,
-    showZero: showZeroP,
-    badgeStyle,
-    textStyle,
-    onPress,
-    style,
-    tokensOverride,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useBadgeTokens)(tokensOverride);
-  const dot = dotP ?? tokens.defaults.dot;
-  const showZero = showZeroP ?? tokens.defaults.showZero;
-  const hasCh = _react().default.Children.count(children) > 0;
-  const {
-    visible,
-    formattedContent
-  } = (0, _react().useMemo)(() => {
-    const num = (0, _utils.isNumericLike)(content) ? Number(content) : null;
-    const hide = num === 0 && !showZero;
-    const vis = dot || (0, _utils.isRenderable)(content) && !hide;
-    if (!vis || dot) return {
-      visible: vis,
-      formattedContent: null
-    };
-    const numMax = (0, _utils.isNumericLike)(max) ? Number(max) : null;
-    const fmt = num !== null && numMax !== null && num > numMax ? `${numMax}+` : content;
-    return {
-      visible: true,
-      formattedContent: fmt
-    };
-  }, [content, dot, max, showZero]);
-  const [sz, setSz] = (0, _react().useState)({
-    width: 0,
-    height: 0
-  });
-  const onLay = (0, _react().useCallback)(e => {
-    const {
-      width,
-      height
-    } = e.nativeEvent.layout;
-    setSz(prev => prev.width === width && prev.height === height ? prev : {
-      width,
-      height
-    });
-  }, []);
-  const transStyle = (0, _react().useMemo)(() => {
-    if (!hasCh) return undefined;
-    if (dot) {
-      const h = tokens.sizing.dotSize / 2;
-      return {
-        transform: [{
-          translateX: h
-        }, {
-          translateY: -h
-        }]
-      };
-    }
-    ;
-    if (sz.width === 0) return {
-      opacity: 0
-    };
-    return {
-      transform: [{
-        translateX: sz.width / 2
-      }, {
-        translateY: -sz.height / 2
-      }]
-    };
-  }, [dot, hasCh, sz.height, sz.width, tokens.sizing.dotSize]);
-  const boxStyle = (0, _react().useMemo)(() => dot ? {
-    width: tokens.sizing.dotSize,
-    height: tokens.sizing.dotSize,
-    borderRadius: tokens.radii.dot,
-    backgroundColor: color ?? tokens.colors.dot
-  } : {
-    minWidth: tokens.sizing.minWidth,
-    minHeight: tokens.sizing.height,
-    paddingHorizontal: tokens.sizing.paddingHorizontal,
-    paddingVertical: tokens.sizing.paddingVertical,
-    borderRadius: tokens.radii.badge,
-    borderWidth: tokens.borders.width,
-    borderColor: tokens.colors.border,
-    backgroundColor: color ?? tokens.colors.background
-  }, [color, dot, tokens.borders.width, tokens.colors.background, tokens.colors.border, tokens.colors.dot, tokens.radii.badge, tokens.radii.dot, tokens.sizing.dotSize, tokens.sizing.height, tokens.sizing.minWidth, tokens.sizing.paddingHorizontal, tokens.sizing.paddingVertical]);
-  const txtStyle = [tokens.layout.text, {
-    color: textColor ?? tokens.colors.text,
-    fontSize: tokens.typography.fontSize,
-    lineHeight: tokens.typography.lineHeight,
-    fontFamily: tokens.typography.fontFamily,
-    fontWeight: tokens.typography.fontWeight
-  }, textStyle];
-  const offStyle = (0, _react().useMemo)(() => !offset ? undefined : hasCh ? {
-    right: offset[0],
-    top: offset[1]
-  } : {
-    marginLeft: offset[0],
-    marginTop: offset[1]
-  }, [hasCh, offset]);
-  const badgeEl = !visible ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    pointerEvents: hasCh ? 'none' : 'auto',
-    onLayout: hasCh && !dot ? onLay : undefined,
-    style: [hasCh ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, boxStyle, transStyle, offStyle, badgeStyle, !hasCh ? style : undefined]
-  }, !dot && (0, _utils.renderTextOrNode)(formattedContent, txtStyle));
-  const accLabel = visible ? dot ? 'has new content' : `${formattedContent}` : undefined;
-  if (hasCh) return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    ref: ref,
-    onPress: onPress,
-    accessibilityLabel: accLabel,
-    style: ({
-      pressed
-    }) => [tokens.layout.wrapper, style, pressed && {
-      opacity: tokens.defaults.pressedOpacity
-    }]
-  }, rest), children, badgeEl) : /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    ref: ref,
-    style: [tokens.layout.wrapper, style]
-  }, rest), children, badgeEl);
-  if (!visible) return null;
-  return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    ref: ref,
-    onPress: onPress,
-    style: ({
-      pressed
-    }) => [tokens.layout.pressableStandalone, pressed && {
-      opacity: tokens.defaults.pressedOpacity
-    }]
-  }, rest), badgeEl) : /*#__PURE__*/_react().default.cloneElement(badgeEl, {
-    ref,
-    ...rest
-  });
-};
-const BadgeForwardRef = /*#__PURE__*/_react().default.forwardRef(BadgeImpl);
-BadgeForwardRef.displayName = 'Badge';
-const Badge = exports.Badge = /*#__PURE__*/_react().default.memo(BadgeForwardRef);
+"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.Badge=void 0;var _utils=require("../../utils"),_tokens=require("./tokens");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 a,o,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(a=t?i:r){if(a.has(e))return a.get(e);a.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?a(n,t,o):n[t]=e[t]);return n})(e,t)}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 i in r)({}).hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},_extends.apply(null,arguments)}const BadgeImpl=(e,t)=>{const{children:r,content:i,color:a,textColor:o,dot:n,max:d,offset:s,showZero:l,badgeStyle:u,textStyle:c,onPress:g,style:f,tokensOverride:p,...h}=e,_=(0,_tokens.useBadgeTokens)(p),y=n??_.defaults.dot,b=l??_.defaults.showZero,m=_react().default.Children.count(r)>0,{visible:v,formattedContent:w}=(0,_react().useMemo)(()=>{const e=(0,_utils.isNumericLike)(i)?Number(i):null,t=0===e&&!b,r=y||(0,_utils.isRenderable)(i)&&!t;if(!r||y)return{visible:r,formattedContent:null};const a=(0,_utils.isNumericLike)(d)?Number(d):null;return{visible:!0,formattedContent:null!==e&&null!==a&&e>a?`${a}+`:i}},[i,y,d,b]),[z,k]=(0,_react().useState)({width:0,height:0}),x=(0,_react().useCallback)(e=>{const{width:t,height:r}=e.nativeEvent.layout;k(e=>e.width===t&&e.height===r?e:{width:t,height:r})},[]),N=(0,_react().useMemo)(()=>{if(m){if(y){const e=_.sizing.dotSize/2;return{transform:[{translateX:e},{translateY:-e}]}}return 0===z.width?{opacity:0}:{transform:[{translateX:z.width/2},{translateY:-z.height/2}]}}},[y,m,z.height,z.width,_.sizing.dotSize]),O=(0,_react().useMemo)(()=>y?{width:_.sizing.dotSize,height:_.sizing.dotSize,borderRadius:_.radii.dot,backgroundColor:a??_.colors.dot}:{minWidth:_.sizing.minWidth,minHeight:_.sizing.height,paddingHorizontal:_.sizing.paddingHorizontal,paddingVertical:_.sizing.paddingVertical,borderRadius:_.radii.badge,borderWidth:_.borders.width,borderColor:_.colors.border,backgroundColor:a??_.colors.background},[a,y,_.borders.width,_.colors.background,_.colors.border,_.colors.dot,_.radii.badge,_.radii.dot,_.sizing.dotSize,_.sizing.height,_.sizing.minWidth,_.sizing.paddingHorizontal,_.sizing.paddingVertical]),S=[_.layout.text,{color:o??_.colors.text,fontSize:_.typography.fontSize,lineHeight:_.typography.lineHeight,fontFamily:_.typography.fontFamily,fontWeight:_.typography.fontWeight},c],W=(0,_react().useMemo)(()=>s?m?{right:s[0],top:s[1]}:{marginLeft:s[0],marginTop:s[1]}:void 0,[m,s]),B=v?_react().default.createElement(_reactNative().View,{pointerEvents:m?"none":"auto",onLayout:m&&!y?x:void 0,style:[m?_.layout.badgeAbsolute:_.layout.badgeStandalone,O,N,W,u,m?void 0:f]},!y&&(0,_utils.renderTextOrNode)(w,S)):null,P=v?y?"has new content":`${w}`:void 0;return m?g?_react().default.createElement(_reactNative().Pressable,_extends({ref:t,onPress:g,accessibilityLabel:P,style:({pressed:e})=>[_.layout.wrapper,f,e&&{opacity:_.defaults.pressedOpacity}]},h),r,B):_react().default.createElement(_reactNative().View,_extends({ref:t,style:[_.layout.wrapper,f]},h),r,B):v?g?_react().default.createElement(_reactNative().Pressable,_extends({ref:t,onPress:g,style:({pressed:e})=>[_.layout.pressableStandalone,e&&{opacity:_.defaults.pressedOpacity}]},h),B):_react().default.cloneElement(B,{ref:t,...h}):null},BadgeForwardRef=_react().default.forwardRef(BadgeImpl);BadgeForwardRef.displayName="Badge";const Badge=exports.Badge=_react().default.memo(BadgeForwardRef);

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

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

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

@@ -1,81 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useBadgeTokens = void 0;
-var _designSystem = require("../../design-system");
-const centered = {
-  alignItems: 'center',
-  justifyContent: 'center'
-};
-const createBadgeTokens = ({
-  palette,
-  spacing,
-  fontSize,
-  radii,
-  typography
-}) => {
-  const dotSize = 8;
-  return {
-    defaults: {
-      dot: false,
-      showZero: true,
-      pressedOpacity: 0.9
-    },
-    layout: {
-      wrapper: {
-        position: 'relative',
-        alignSelf: 'flex-start'
-      },
-      badgeAbsolute: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        ...centered,
-        zIndex: 1
-      },
-      badgeStandalone: {
-        alignSelf: 'flex-start',
-        flexDirection: 'row',
-        ...centered
-      },
-      pressableStandalone: {
-        alignSelf: 'flex-start',
-        flexDirection: 'row'
-      },
-      text: {
-        textAlign: 'center',
-        includeFontPadding: false,
-        textAlignVertical: 'center'
-      }
-    },
-    colors: {
-      background: palette.danger[500],
-      dot: palette.danger[500],
-      text: palette.danger.foreground ?? '#fff',
-      border: '#fff'
-    },
-    typography: {
-      fontSize: fontSize.xs,
-      fontWeight: typography.weight.bold,
-      fontFamily: typography.fontFamily,
-      lineHeight: fontSize.xs * typography.lineHeightMultiplier
-    },
-    sizing: {
-      minWidth: 18,
-      height: 18,
-      paddingHorizontal: spacing.xs,
-      paddingVertical: spacing.xxs,
-      dotSize
-    },
-    radii: {
-      badge: radii.pill,
-      dot: dotSize / 2
-    },
-    borders: {
-      width: 1
-    }
-  };
-};
-const useBadgeTokens = exports.useBadgeTokens = (0, _designSystem.createComponentTokensHook)('badge', createBadgeTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useBadgeTokens=void 0;var _designSystem=require("../../design-system");const centered={alignItems:"center",justifyContent:"center"},createBadgeTokens=({palette:e,spacing:t,fontSize:n,radii:i,typography:o})=>({defaults:{dot:!1,showZero:!0,pressedOpacity:.9},layout:{wrapper:{position:"relative",alignSelf:"flex-start"},badgeAbsolute:{position:"absolute",top:0,right:0,...centered,zIndex:1},badgeStandalone:{alignSelf:"flex-start",flexDirection:"row",...centered},pressableStandalone:{alignSelf:"flex-start",flexDirection:"row"},text:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"}},colors:{background:e.danger[500],dot:e.danger[500],text:e.danger.foreground??"#fff",border:"#fff"},typography:{fontSize:n.xs,fontWeight:o.weight.bold,fontFamily:o.fontFamily,lineHeight:n.xs*o.lineHeightMultiplier},sizing:{minWidth:18,height:18,paddingHorizontal:t.xs,paddingVertical:t.xxs,dotSize:8},radii:{badge:i.pill,dot:4},borders:{width:1}}),useBadgeTokens=exports.useBadgeTokens=(0,_designSystem.createComponentTokensHook)("badge",createBadgeTokens);