react-native-system-ui 1.0.2 → 1.0.4

package/dist/es/components/toast/imperative.js

@@ -1,130 +1 @@
-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, useEffect, useState } from 'react';
-import Portal from '../portal/Portal';
-import { isFunction, isString, isText } from '../../utils';
-import { ToastContent } from './Toast';
-const activeKeys = new Set();
-const toastOptions = new Map();
-const toastControllers = new Map();
-let allowMultiple = false;
-const baseOptions = {
-  type: 'info',
-  position: 'middle',
-  forbidClick: false,
-  overlay: false
-};
-let currentOptions = {
-  ...baseOptions
-};
-const typeDefaults = new Map();
-const parseOptions = input => /*#__PURE__*/React.isValidElement(input) || isText(input) ? {
-  message: input
-} : input ?? {};
-const mergeOptions = (input, fallbackType) => {
-  const type = input.type ?? fallbackType;
-  const merged = {
-    ...currentOptions,
-    ...typeDefaults.get(type),
-    ...input,
-    type
-  };
-  if (merged.duration == null) merged.duration = currentOptions.duration ?? 2000;
-  return merged;
-};
-const removeToast = key => {
-  Portal.remove(key);
-  activeKeys.delete(key);
-  toastOptions.delete(key);
-  toastControllers.delete(key);
-};
-const closeToast = key => {
-  const c = toastControllers.get(key);
-  c ? c.close() : removeToast(key);
-};
-const ToastPortal = ({
-  id,
-  options
-}) => {
-  const [visible, setVisible] = useState(true);
-  useEffect(() => {
-    toastControllers.set(id, {
-      close: () => setVisible(false)
-    });
-    return () => {
-      toastControllers.delete(id);
-    };
-  }, [id]);
-  const handleClose = useCallback(() => {
-    options.onClose?.();
-    setVisible(false);
-  }, [options]);
-  const handleClosed = useCallback(() => {
-    options.onClosed?.();
-    removeToast(id);
-  }, [id, options]);
-  return /*#__PURE__*/React.createElement(ToastContent, _extends({}, options, {
-    visible: visible,
-    onClose: handleClose,
-    onClosed: handleClosed
-  }));
-};
-const showToast = (input, fallbackType = 'info') => {
-  const opts = mergeOptions(parseOptions(input), fallbackType);
-  if (!allowMultiple) activeKeys.forEach(key => closeToast(key));
-  const key = Portal.add(null);
-  toastOptions.set(key, opts);
-  Portal.update(key, /*#__PURE__*/React.createElement(ToastPortal, {
-    id: key,
-    options: opts
-  }));
-  activeKeys.add(key);
-  const config = next => {
-    const prev = toastOptions.get(key);
-    if (!prev) return;
-    const parsed = parseOptions(isFunction(next) ? next(prev) : next);
-    const nextType = parsed.type ?? prev.type ?? fallbackType;
-    const merged = {
-      ...prev,
-      ...parsed,
-      type: nextType
-    };
-    if ('duration' in parsed && parsed.duration == null) merged.duration = typeDefaults.get(nextType)?.duration ?? currentOptions.duration ?? 2000;
-    toastOptions.set(key, merged);
-    Portal.update(key, /*#__PURE__*/React.createElement(ToastPortal, {
-      id: key,
-      options: merged
-    }));
-  };
-  return {
-    clear: () => closeToast(key),
-    update: next => config(next),
-    config
-  };
-};
-export const ToastImperative = {
-  show: options => showToast(options),
-  info: options => showToast(options, 'info'),
-  success: options => showToast(options, 'success'),
-  fail: options => showToast(options, 'fail'),
-  loading: options => showToast(options, 'loading'),
-  clear: () => {
-    activeKeys.forEach(key => closeToast(key));
-  },
-  allowMultiple: (value = true) => {
-    allowMultiple = value;
-  },
-  setDefaultOptions: (typeOrOptions, options) => {
-    if (isString(typeOrOptions)) typeDefaults.set(typeOrOptions, options ?? {});else currentOptions = {
-      ...currentOptions,
-      ...typeOrOptions
-    };
-  },
-  resetDefaultOptions: type => {
-    if (type) typeDefaults.delete(type);else {
-      currentOptions = {
-        ...baseOptions
-      };
-      typeDefaults.clear();
-    }
-  }
-};
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var s in o)({}).hasOwnProperty.call(o,s)&&(t[s]=o[s])}return t},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useState}from"react";import Portal from"../portal/Portal";import{isFunction,isString,isText}from"../../utils";import{ToastContent}from"./Toast";const activeKeys=new Set,toastOptions=new Map,toastControllers=new Map;let allowMultiple=!1;const baseOptions={type:"info",position:"middle",forbidClick:!1,overlay:!1};let currentOptions={...baseOptions};const typeDefaults=new Map,parseOptions=t=>React.isValidElement(t)||isText(t)?{message:t}:t??{},mergeOptions=(t,e)=>{const o=t.type??e,s={...currentOptions,...typeDefaults.get(o),...t,type:o};return null==s.duration&&(s.duration=currentOptions.duration??2e3),s},removeToast=t=>{Portal.remove(t),activeKeys.delete(t),toastOptions.delete(t),toastControllers.delete(t)},closeToast=t=>{const e=toastControllers.get(t);e?e.close():removeToast(t)},ToastPortal=({id:t,options:e})=>{const[o,s]=useState(!0);useEffect(()=>(toastControllers.set(t,{close:()=>s(!1)}),()=>{toastControllers.delete(t)}),[t]);const a=useCallback(()=>{e.onClose?.(),s(!1)},[e]),n=useCallback(()=>{e.onClosed?.(),removeToast(t)},[t,e]);return React.createElement(ToastContent,_extends({},e,{visible:o,onClose:a,onClosed:n}))},showToast=(t,e="info")=>{const o=mergeOptions(parseOptions(t),e);allowMultiple||activeKeys.forEach(t=>closeToast(t));const s=Portal.add(null);toastOptions.set(s,o),Portal.update(s,React.createElement(ToastPortal,{id:s,options:o})),activeKeys.add(s);const a=t=>{const o=toastOptions.get(s);if(!o)return;const a=parseOptions(isFunction(t)?t(o):t),n=a.type??o.type??e,l={...o,...a,type:n};"duration"in a&&null==a.duration&&(l.duration=typeDefaults.get(n)?.duration??currentOptions.duration??2e3),toastOptions.set(s,l),Portal.update(s,React.createElement(ToastPortal,{id:s,options:l}))};return{clear:()=>closeToast(s),update:t=>a(t),config:a}};export const ToastImperative={show:t=>showToast(t),info:t=>showToast(t,"info"),success:t=>showToast(t,"success"),fail:t=>showToast(t,"fail"),loading:t=>showToast(t,"loading"),clear:()=>{activeKeys.forEach(t=>closeToast(t))},allowMultiple:(t=!0)=>{allowMultiple=t},setDefaultOptions:(t,e)=>{isString(t)?typeDefaults.set(t,e??{}):currentOptions={...currentOptions,...t}},resetDefaultOptions:t=>{t?typeDefaults.delete(t):(currentOptions={...baseOptions},typeDefaults.clear())}};

package/dist/es/components/toast/index.js

@@ -1,5 +1 @@
-import { Toast as ToastComponent } from './Toast';
-import { ToastImperative } from './imperative';
-const Toast = Object.assign(ToastComponent, ToastImperative);
-export default Toast;
-export { Toast };
+import{Toast as ToastComponent}from"./Toast";import{ToastImperative}from"./imperative";const Toast=Object.assign(ToastComponent,ToastImperative);export default Toast;export{Toast};

package/dist/es/components/toast/tokens.js

@@ -1,36 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-export const createToastTokens = foundations => {
-  const onDarkText = foundations.palette.primary.foreground ?? '#ffffff';
-  const backdrop = 'rgba(0,0,0,0.7)';
-  return {
-    colors: {
-      text: onDarkText,
-      backdrop,
-      variants: {
-        info: backdrop,
-        success: backdrop,
-        fail: backdrop,
-        loading: backdrop
-      },
-      transparent: 'transparent'
-    },
-    fontSize: foundations.fontSize.sm,
-    lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier),
-    fontFamily: foundations.typography.fontFamily,
-    radius: foundations.radii.md,
-    gap: foundations.spacing.sm,
-    iconSize: 36,
-    maxWidth: '70%',
-    textMinWidth: 96,
-    textPaddingVertical: foundations.spacing.sm,
-    textPaddingHorizontal: foundations.spacing.md,
-    defaultPadding: foundations.spacing.lg,
-    defaultWidth: 88,
-    defaultMinHeight: 88,
-    pressedOpacity: 0.85,
-    positionOffsetRatio: 0.2,
-    positionOffsetMin: 60,
-    animationDuration: 160
-  };
-};
-export const useToastTokens = createComponentTokensHook('toast', createToastTokens);
+import{createComponentTokensHook}from"../../design-system";export const createToastTokens=t=>{const e="rgba(0,0,0,0.7)";return{colors:{text:t.palette.primary.foreground??"#ffffff",backdrop:e,variants:{info:e,success:e,fail:e,loading:e},transparent:"transparent"},fontSize:t.fontSize.sm,lineHeight:Math.round(t.fontSize.sm*t.typography.lineHeightMultiplier),fontFamily:t.typography.fontFamily,radius:t.radii.md,gap:t.spacing.sm,iconSize:36,maxWidth:"70%",textMinWidth:96,textPaddingVertical:t.spacing.sm,textPaddingHorizontal:t.spacing.md,defaultPadding:t.spacing.lg,defaultWidth:88,defaultMinHeight:88,pressedOpacity:.85,positionOffsetRatio:.2,positionOffsetMin:60,animationDuration:160}};export const useToastTokens=createComponentTokensHook("toast",createToastTokens);

package/dist/es/components/typography/Typography.js

@@ -1,162 +1 @@
-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, useState } from 'react';
-import { Linking, Text, View } from 'react-native';
-import { isBoolean, isNumber, isPlainObject } from '../../utils';
-import { isWeb as isWebPlatform } from '../../platform';
-import { useTypographyTokens } from './tokens';
-const FLEX_SHRINK_STYLE = {
-  flexShrink: 1
-};
-const resolveEllipsisRows = ellipsis => {
-  if (!ellipsis) return undefined;
-  if (isBoolean(ellipsis)) return ellipsis ? 1 : undefined;
-  if (isNumber(ellipsis)) return ellipsis;
-  return ellipsis.rows ?? 1;
-};
-const hasTypographyColorKey = (colors, key) => Object.prototype.hasOwnProperty.call(colors, key);
-const isEllipsisObject = ellipsis => isPlainObject(ellipsis);
-const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    tokensOverride,
-    children,
-    type: typeP,
-    color: colorP,
-    size: sizeP,
-    level,
-    disabled: disP,
-    delete: deleted,
-    underline,
-    center,
-    strong,
-    ellipsis,
-    style,
-    onPress,
-    ...textProps
-  } = props;
-  const tokens = useTypographyTokens(tokensOverride);
-  const type = typeP ?? tokens.defaults.type;
-  const size = sizeP ?? tokens.defaults.size;
-  const disabled = disP ?? tokens.defaults.disabled;
-  const ellipsisRows = resolveEllipsisRows(ellipsis);
-  const ellipsisConfig = isEllipsisObject(ellipsis) ? ellipsis : undefined;
-  const [isTruncated, setIsTruncated] = useState(false);
-  const [expanded, setExpanded] = useState(false);
-  const isWeb = isWebPlatform();
-  const handleTextLayout = useCallback(event => {
-    if (!ellipsisRows || expanded) return;
-    const exceeded = event.nativeEvent.lines.length > ellipsisRows;
-    setIsTruncated(prev => prev === exceeded ? prev : exceeded);
-  }, [ellipsisRows, expanded]);
-  let resolvedColor = tokens.colors[type] ?? tokens.colors.default;
-  if (colorP !== undefined && colorP !== null) {
-    const ck = String(colorP);
-    resolvedColor = hasTypographyColorKey(tokens.colors, ck) ? tokens.colors[ck] : ck;
-  }
-  ;
-  const fontSize = level ? tokens.sizing.titles[level].fontSize : tokens.sizing.sizes[size];
-  const lineHeight = level ? tokens.sizing.titles[level].lineHeight : fontSize * tokens.sizing.lineHeightMultiplier;
-  const textDeco = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
-  const baseStyle = [{
-    color: resolvedColor,
-    fontSize,
-    lineHeight,
-    fontFamily: tokens.typography.fontFamily,
-    fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
-    includeFontPadding: false,
-    textDecorationLine: textDeco,
-    textAlign: center ? 'center' : undefined,
-    opacity: disabled ? tokens.opacity.disabled : 1
-  }, style];
-  const hasActTxt = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
-  const showAct = hasActTxt && (isTruncated || expanded || isWeb);
-  const handleToggleEllipsis = useCallback(() => {
-    if (!ellipsisConfig) return;
-    setExpanded(prev => {
-      const next = !prev;
-      ellipsisConfig.onExpand?.(next);
-      return next;
-    });
-  }, [ellipsisConfig]);
-  const actLabel = !ellipsisConfig ? undefined : expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
-  const actTxtStyle = {
-    color: tokens.colors.primary,
-    fontSize: tokens.sizing.sizes.sm,
-    fontWeight: tokens.typography.weight.medium,
-    marginLeft: tokens.sizing.actionMarginLeft,
-    includeFontPadding: false
-  };
-  const textStyle = showAct ? [baseStyle, FLEX_SHRINK_STYLE] : baseStyle;
-  const textNode = /*#__PURE__*/React.createElement(Text, _extends({
-    ref: ref,
-    style: textStyle,
-    onPress: onPress,
-    numberOfLines: !expanded ? ellipsisRows : undefined,
-    ellipsizeMode: "tail",
-    onTextLayout: hasActTxt && ellipsisRows && !expanded && !isWeb ? handleTextLayout : undefined
-  }, textProps), children);
-  if (!showAct) return center ? /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.centerWrapper
-  }, textNode) : textNode;
-  const actionNode = /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.actionRow
-  }, textNode, /*#__PURE__*/React.createElement(Text, {
-    onPress: handleToggleEllipsis,
-    suppressHighlighting: true,
-    style: actTxtStyle
-  }, actLabel));
-  return center ? /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.centerWrapper
-  }, actionNode) : actionNode;
-});
-TypographyTextBaseInner.displayName = 'TypographyText';
-const TypographyTextBase = /*#__PURE__*/React.memo(TypographyTextBaseInner);
-TypographyTextBase.displayName = 'TypographyText';
-const TypographyTitle = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    level = 5,
-    accessibilityRole,
-    ...rest
-  } = props;
-  return /*#__PURE__*/React.createElement(TypographyTextBase, _extends({
-    ref: ref,
-    level: level,
-    accessibilityRole: accessibilityRole ?? 'header'
-  }, rest));
-});
-TypographyTitle.displayName = 'TypographyTitle';
-const TypographyLink = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    href,
-    onPress,
-    underline = true,
-    type = 'primary',
-    accessibilityRole,
-    ...rest
-  } = props;
-  const handlePress = useCallback(async event => {
-    if (onPress) {
-      onPress(event);
-      return;
-    }
-    ;
-    if (href) {
-      try {
-        await Linking.openURL(href);
-      } catch {}
-    }
-  }, [onPress, href]);
-  return /*#__PURE__*/React.createElement(TypographyTextBase, _extends({
-    ref: ref,
-    underline: underline,
-    type: type,
-    onPress: handlePress,
-    accessibilityRole: accessibilityRole ?? 'link'
-  }, rest));
-});
-TypographyLink.displayName = 'TypographyLink';
-export const Typography = Object.assign(TypographyTextBase, {
-  Text: TypographyTextBase,
-  Title: TypographyTitle,
-  Link: TypographyLink
-});
-export default Typography;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)({}).hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},_extends.apply(null,arguments)}import React,{useCallback,useState}from"react";import{Linking,Text,View}from"react-native";import{isBoolean,isNumber,isPlainObject}from"../../utils";import{isWeb as isWebPlatform}from"../../platform";import{useTypographyTokens}from"./tokens";const FLEX_SHRINK_STYLE={flexShrink:1},resolveEllipsisRows=e=>{if(e)return isBoolean(e)?e?1:void 0:isNumber(e)?e:e.rows??1},hasTypographyColorKey=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),isEllipsisObject=e=>isPlainObject(e),TypographyTextBaseInner=React.forwardRef((e,t)=>{const{tokensOverride:i,children:r,type:a,color:o,size:s,level:n,disabled:l,delete:p,underline:y,center:c,strong:g,ellipsis:T,style:h,onPress:d,...u}=e,f=useTypographyTokens(i),m=a??f.defaults.type,x=s??f.defaults.size,b=l??f.defaults.disabled,R=resolveEllipsisRows(T),v=isEllipsisObject(T)?T:void 0,[k,w]=useState(!1),[E,L]=useState(!1),z=isWebPlatform(),P=useCallback(e=>{if(!R||E)return;const t=e.nativeEvent.lines.length>R;w(e=>e===t?e:t)},[R,E]);let O=f.colors[m]??f.colors.default;if(null!=o){const e=String(o);O=hasTypographyColorKey(f.colors,e)?f.colors[e]:e}const S=n?f.sizing.titles[n].fontSize:f.sizing.sizes[x],B=y&&p?"underline line-through":y?"underline":p?"line-through":void 0,_=[{color:O,fontSize:S,lineHeight:n?f.sizing.titles[n].lineHeight:S*f.sizing.lineHeightMultiplier,fontFamily:f.typography.fontFamily,fontWeight:g?f.typography.weight.strong:f.typography.weight.regular,includeFontPadding:!1,textDecorationLine:B,textAlign:c?"center":void 0,opacity:b?f.opacity.disabled:1},h],j=!!v&&(v.expandText||v.collapseText),N=j&&(k||E||z),W=useCallback(()=>{v&&L(e=>{const t=!e;return v.onExpand?.(t),t})},[v]),C=v?E?v.collapseText??v.expandText:v.expandText??v.collapseText:void 0,F={color:f.colors.primary,fontSize:f.sizing.sizes.sm,fontWeight:f.typography.weight.medium,marginLeft:f.sizing.actionMarginLeft,includeFontPadding:!1},H=N?[_,FLEX_SHRINK_STYLE]:_,I=React.createElement(Text,_extends({ref:t,style:H,onPress:d,numberOfLines:E?void 0:R,ellipsizeMode:"tail",onTextLayout:j&&R&&!E&&!z?P:void 0},u),r);if(!N)return c?React.createElement(View,{style:f.layout.centerWrapper},I):I;const K=React.createElement(View,{style:f.layout.actionRow},I,React.createElement(Text,{onPress:W,suppressHighlighting:!0,style:F},C));return c?React.createElement(View,{style:f.layout.centerWrapper},K):K});TypographyTextBaseInner.displayName="TypographyText";const TypographyTextBase=React.memo(TypographyTextBaseInner);TypographyTextBase.displayName="TypographyText";const TypographyTitle=React.forwardRef((e,t)=>{const{level:i=5,accessibilityRole:r,...a}=e;return React.createElement(TypographyTextBase,_extends({ref:t,level:i,accessibilityRole:r??"header"},a))});TypographyTitle.displayName="TypographyTitle";const TypographyLink=React.forwardRef((e,t)=>{const{href:i,onPress:r,underline:a=!0,type:o="primary",accessibilityRole:s,...n}=e,l=useCallback(async e=>{if(r)r(e);else if(i)try{await Linking.openURL(i)}catch{}},[r,i]);return React.createElement(TypographyTextBase,_extends({ref:t,underline:a,type:o,onPress:l,accessibilityRole:s??"link"},n))});TypographyLink.displayName="TypographyLink";export const Typography=Object.assign(TypographyTextBase,{Text:TypographyTextBase,Title:TypographyTitle,Link:TypographyLink});export default Typography;

package/dist/es/components/typography/index.js

@@ -1,2 +1 @@
-import Typography from './Typography';
-export default Typography;
+import Typography from"./Typography";export default Typography;

package/dist/es/components/typography/tokens.js

@@ -1,82 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createTypographyTokens = ({
-  palette,
-  fontSize,
-  typography,
-  opacity
-}) => ({
-  defaults: {
-    type: 'default',
-    size: 'md',
-    disabled: false
-  },
-  layout: {
-    centerWrapper: {
-      alignItems: 'center'
-    },
-    actionRow: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      alignItems: 'baseline'
-    }
-  },
-  colors: {
-    default: palette.default[700],
-    primary: palette.primary[500],
-    success: palette.success[500],
-    warning: palette.warning[500],
-    danger: palette.danger[500],
-    secondary: palette.default[500],
-    light: palette.default[300]
-  },
-  sizing: {
-    sizes: {
-      xs: fontSize.xs,
-      sm: fontSize.sm,
-      md: fontSize.md,
-      lg: fontSize.lg,
-      xl: fontSize.xl,
-      xxl: fontSize.xl * 1.2
-    },
-    titles: {
-      1: {
-        fontSize: 30,
-        lineHeight: 34
-      },
-      2: {
-        fontSize: 26,
-        lineHeight: 30
-      },
-      3: {
-        fontSize: 22,
-        lineHeight: 26
-      },
-      4: {
-        fontSize: 20,
-        lineHeight: 24
-      },
-      5: {
-        fontSize: 16,
-        lineHeight: 20
-      },
-      6: {
-        fontSize: 14,
-        lineHeight: 18
-      }
-    },
-    lineHeightMultiplier: 1.3,
-    actionMarginLeft: 4
-  },
-  typography: {
-    fontFamily: typography.fontFamily,
-    weight: {
-      regular: typography.weight.regular,
-      medium: typography.weight.medium,
-      strong: typography.weight.semiBold
-    }
-  },
-  opacity: {
-    disabled: opacity.disabled
-  }
-});
-export const useTypographyTokens = createComponentTokensHook('typography', createTypographyTokens);
+import{createComponentTokensHook}from"../../design-system";const createTypographyTokens=({palette:e,fontSize:t,typography:i,opacity:n})=>({defaults:{type:"default",size:"md",disabled:!1},layout:{centerWrapper:{alignItems:"center"},actionRow:{flexDirection:"row",flexWrap:"wrap",alignItems:"baseline"}},colors:{default:e.default[700],primary:e.primary[500],success:e.success[500],warning:e.warning[500],danger:e.danger[500],secondary:e.default[500],light:e.default[300]},sizing:{sizes:{xs:t.xs,sm:t.sm,md:t.md,lg:t.lg,xl:t.xl,xxl:1.2*t.xl},titles:{1:{fontSize:30,lineHeight:34},2:{fontSize:26,lineHeight:30},3:{fontSize:22,lineHeight:26},4:{fontSize:20,lineHeight:24},5:{fontSize:16,lineHeight:20},6:{fontSize:14,lineHeight:18}},lineHeightMultiplier:1.3,actionMarginLeft:4},typography:{fontFamily:i.fontFamily,weight:{regular:i.weight.regular,medium:i.weight.medium,strong:i.weight.semiBold}},opacity:{disabled:n.disabled}});export const useTypographyTokens=createComponentTokensHook("typography",createTypographyTokens);

package/dist/es/components/water-mark/WaterMark.js

@@ -1,153 +1 @@
-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, useEffect, useMemo, useRef, useState } from 'react';
-import { Image, Text, View, useWindowDimensions } from 'react-native';
-import { isFiniteNumber, isString } from '../../utils';
-import { useWaterMarkTokens } from './tokens';
-const resolveFiniteNumber = (value, fallback) => isFiniteNumber(value) ? value : fallback;
-const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteNumber(value, fallback));
-const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
-const WaterMarkImpl = props => {
-  const {
-    content: contentP,
-    width,
-    height,
-    gapX,
-    gapY,
-    rotate,
-    image,
-    font,
-    fontSize,
-    color,
-    opacity,
-    zIndex: zIdxP,
-    fullPage: fullP,
-    tokensOverride,
-    style,
-    onLayoutCalculated,
-    textStyle,
-    ...rest
-  } = props;
-  const tokens = useWaterMarkTokens(tokensOverride);
-  const content = contentP ?? tokens.defaults.content;
-  const zIndex = resolveFiniteNumber(zIdxP, tokens.defaults.zIndex);
-  const fullPage = fullP ?? tokens.defaults.fullPage;
-  const window = useWindowDimensions();
-  const [layoutSize, setLayoutSize] = useState({
-    width: 0,
-    height: 0
-  });
-  const lastLayoutRef = useRef({
-    width: 0,
-    height: 0
-  });
-  const size = fullPage ? window : layoutSize;
-  const rGapX = resolveNonNegativeNumber(gapX, tokens.defaults.gapX);
-  const rGapY = resolveNonNegativeNumber(gapY, tokens.defaults.gapY);
-  const rRotate = resolveFiniteNumber(rotate, tokens.defaults.rotate);
-  const rOpacity = Math.max(0, Math.min(1, resolveFiniteNumber(opacity, tokens.defaults.opacity)));
-  const fontSzFromFont = isFiniteNumber(font?.size) ? font.size : isString(font?.size) ? Number.parseFloat(font.size) : undefined;
-  const normFontSz = Math.max(0, resolveFiniteNumber((Number.isFinite(fontSzFromFont ?? Number.NaN) ? fontSzFromFont : undefined) ?? fontSize, tokens.defaults.fontSize));
-  const rColor = font?.color ?? color ?? tokens.colors.mark;
-  const markW = resolvePositiveNumber(image?.width ?? width, tokens.defaults.width);
-  const markH = resolvePositiveNumber(image?.height ?? height, tokens.defaults.height);
-  const cellW = Math.max(1, markW + rGapX);
-  const cellH = Math.max(1, markH + rGapY);
-  const rows = size.height ? Math.ceil(size.height / cellH) + 1 : 1;
-  const cols = size.width ? Math.ceil(size.width / cellW) + 1 : 1;
-  const onLayoutCalcRef = useRef(onLayoutCalculated);
-  onLayoutCalcRef.current = onLayoutCalculated;
-  const handleLayout = useCallback(event => {
-    if (fullPage) return;
-    const {
-      width: w,
-      height: h
-    } = event.nativeEvent.layout;
-    if (!isFiniteNumber(w) || !isFiniteNumber(h)) return;
-    const nw = Math.max(0, w),
-      nh = Math.max(0, h);
-    if (lastLayoutRef.current.width === nw && lastLayoutRef.current.height === nh) return;
-    lastLayoutRef.current = {
-      width: nw,
-      height: nh
-    };
-    setLayoutSize({
-      width: nw,
-      height: nh
-    });
-    onLayoutCalcRef.current?.({
-      width: nw,
-      height: nh
-    });
-  }, [fullPage]);
-  useEffect(() => {
-    if (!fullPage || !isFiniteNumber(window.width) || !isFiniteNumber(window.height) || window.width <= 0 || window.height <= 0) return;
-    onLayoutCalcRef.current?.({
-      width: window.width,
-      height: window.height
-    });
-  }, [fullPage, window.width, window.height]);
-  const zIdxStyle = useMemo(() => ({
-    zIndex
-  }), [zIndex]);
-  const cellStyle = useMemo(() => ({
-    width: cellW,
-    height: cellH
-  }), [cellW, cellH]);
-  const oddRowStyle = useMemo(() => ({
-    paddingLeft: cellW / 2
-  }), [cellW]);
-  const markStyle = useMemo(() => ({
-    width: markW,
-    height: markH,
-    transform: [{
-      rotate: `${rRotate}deg`
-    }]
-  }), [markW, markH, rRotate]);
-  const imgStyle = useMemo(() => ({
-    width: markW,
-    height: markH,
-    opacity: rOpacity
-  }), [markW, markH, rOpacity]);
-  const txtBaseStyle = useMemo(() => ({
-    fontSize: normFontSz,
-    color: rColor,
-    opacity: rOpacity,
-    fontFamily: font?.family,
-    fontWeight: font?.weight
-  }), [normFontSz, rColor, rOpacity, font?.family, font?.weight]);
-  const rowIdx = Array.from({
-    length: rows
-  }, (_, i) => i);
-  const colIdx = Array.from({
-    length: cols
-  }, (_, i) => i);
-  return /*#__PURE__*/React.createElement(View, _extends({
-    pointerEvents: "none",
-    importantForAccessibility: "no-hide-descendants",
-    accessibilityElementsHidden: true,
-    style: [fullPage ? tokens.layout.absoluteFill : null, zIdxStyle, style],
-    onLayout: handleLayout
-  }, rest), /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.wrapper
-  }, rowIdx.map(ri => /*#__PURE__*/React.createElement(View, {
-    key: `row-${ri}`,
-    style: [tokens.layout.row, ri % 2 === 0 ? null : oddRowStyle]
-  }, colIdx.map(ci => /*#__PURE__*/React.createElement(View, {
-    key: `col-${ri}-${ci}`,
-    style: [tokens.layout.cell, cellStyle]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.mark, markStyle]
-  }, image ? /*#__PURE__*/React.createElement(Image, {
-    source: {
-      uri: image.src
-    },
-    style: imgStyle,
-    resizeMode: "contain"
-  }) : /*#__PURE__*/React.createElement(Text, {
-    allowFontScaling: false,
-    style: [txtBaseStyle, textStyle]
-  }, content))))))));
-};
-const WaterMark = /*#__PURE__*/React.memo(WaterMarkImpl);
-WaterMark.displayName = 'WaterMark';
-export default WaterMark;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var a in i)({}).hasOwnProperty.call(i,a)&&(e[a]=i[a])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Image,Text,View,useWindowDimensions}from"react-native";import{isFiniteNumber,isString}from"../../utils";import{useWaterMarkTokens}from"./tokens";const resolveFiniteNumber=(e,t)=>isFiniteNumber(e)?e:t,resolveNonNegativeNumber=(e,t)=>Math.max(0,resolveFiniteNumber(e,t)),resolvePositiveNumber=(e,t)=>Math.max(1,resolveFiniteNumber(e,t)),WaterMarkImpl=e=>{const{content:t,width:i,height:a,gapX:r,gapY:n,rotate:o,image:s,font:l,fontSize:u,color:h,opacity:m,zIndex:c,fullPage:d,tokensOverride:g,style:f,onLayoutCalculated:w,textStyle:y,...N}=e,b=useWaterMarkTokens(g),v=t??b.defaults.content,p=resolveFiniteNumber(c,b.defaults.zIndex),M=d??b.defaults.fullPage,F=useWindowDimensions(),[x,k]=useState({width:0,height:0}),E=useRef({width:0,height:0}),R=M?F:x,z=resolveNonNegativeNumber(r,b.defaults.gapX),W=resolveNonNegativeNumber(n,b.defaults.gapY),S=resolveFiniteNumber(o,b.defaults.rotate),I=Math.max(0,Math.min(1,resolveFiniteNumber(m,b.defaults.opacity))),P=isFiniteNumber(l?.size)?l.size:isString(l?.size)?Number.parseFloat(l.size):void 0,V=Math.max(0,resolveFiniteNumber((Number.isFinite(P??Number.NaN)?P:void 0)??u,b.defaults.fontSize)),O=l?.color??h??b.colors.mark,T=resolvePositiveNumber(s?.width??i,b.defaults.width),$=resolvePositiveNumber(s?.height??a,b.defaults.height),_=Math.max(1,T+z),A=Math.max(1,$+W),C=R.height?Math.ceil(R.height/A)+1:1,L=R.width?Math.ceil(R.width/_)+1:1,j=useRef(w);j.current=w;const D=useCallback(e=>{if(M)return;const{width:t,height:i}=e.nativeEvent.layout;if(!isFiniteNumber(t)||!isFiniteNumber(i))return;const a=Math.max(0,t),r=Math.max(0,i);E.current.width===a&&E.current.height===r||(E.current={width:a,height:r},k({width:a,height:r}),j.current?.({width:a,height:r}))},[M]);useEffect(()=>{!M||!isFiniteNumber(F.width)||!isFiniteNumber(F.height)||F.width<=0||F.height<=0||j.current?.({width:F.width,height:F.height})},[M,F.width,F.height]);const X=useMemo(()=>({zIndex:p}),[p]),Y=useMemo(()=>({width:_,height:A}),[_,A]),H=useMemo(()=>({paddingLeft:_/2}),[_]),q=useMemo(()=>({width:T,height:$,transform:[{rotate:`${S}deg`}]}),[T,$,S]),B=useMemo(()=>({width:T,height:$,opacity:I}),[T,$,I]),G=useMemo(()=>({fontSize:V,color:O,opacity:I,fontFamily:l?.family,fontWeight:l?.weight}),[V,O,I,l?.family,l?.weight]),J=Array.from({length:C},(e,t)=>t),K=Array.from({length:L},(e,t)=>t);return React.createElement(View,_extends({pointerEvents:"none",importantForAccessibility:"no-hide-descendants",accessibilityElementsHidden:!0,style:[M?b.layout.absoluteFill:null,X,f],onLayout:D},N),React.createElement(View,{style:b.layout.wrapper},J.map(e=>React.createElement(View,{key:`row-${e}`,style:[b.layout.row,e%2==0?null:H]},K.map(t=>React.createElement(View,{key:`col-${e}-${t}`,style:[b.layout.cell,Y]},React.createElement(View,{style:[b.layout.mark,q]},s?React.createElement(Image,{source:{uri:s.src},style:B,resizeMode:"contain"}):React.createElement(Text,{allowFontScaling:!1,style:[G,y]},v))))))))},WaterMark=React.memo(WaterMarkImpl);WaterMark.displayName="WaterMark";export default WaterMark;

package/dist/es/components/water-mark/index.js

@@ -1,4 +1 @@
-import WaterMark from './WaterMark';
-export { useWaterMarkTokens } from './tokens';
-export default WaterMark;
-export { WaterMark };
+import WaterMark from"./WaterMark";export{useWaterMarkTokens}from"./tokens";export default WaterMark;export{WaterMark};

package/dist/es/components/water-mark/tokens.js

@@ -1,42 +1 @@
-import { StyleSheet } from 'react-native';
-import { createComponentTokensHook } from '../../design-system';
-const createTokens = foundations => {
-  const {
-    palette
-  } = foundations;
-  return {
-    defaults: {
-      content: 'WaterMark',
-      width: 120,
-      height: 64,
-      gapX: 24,
-      gapY: 48,
-      rotate: -22,
-      fontSize: 14,
-      opacity: 0.15,
-      zIndex: 2000,
-      fullPage: true
-    },
-    layout: {
-      absoluteFill: StyleSheet.absoluteFillObject,
-      wrapper: {
-        flex: 1
-      },
-      row: {
-        flexDirection: 'row'
-      },
-      cell: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      mark: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    },
-    colors: {
-      mark: palette.default[500]
-    }
-  };
-};
-export const useWaterMarkTokens = createComponentTokensHook('waterMark', createTokens);
+import{StyleSheet}from"react-native";import{createComponentTokensHook}from"../../design-system";const createTokens=e=>{const{palette:t}=e;return{defaults:{content:"WaterMark",width:120,height:64,gapX:24,gapY:48,rotate:-22,fontSize:14,opacity:.15,zIndex:2e3,fullPage:!0},layout:{absoluteFill:StyleSheet.absoluteFillObject,wrapper:{flex:1},row:{flexDirection:"row"},cell:{alignItems:"center",justifyContent:"center"},mark:{alignItems:"center",justifyContent:"center"}},colors:{mark:t.default[500]}}};export const useWaterMarkTokens=createComponentTokensHook("waterMark",createTokens);

package/dist/es/design-system/Text.js

@@ -1,19 +1 @@
-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 from 'react';
-import { Text as RNText } from 'react-native';
-import { useTheme } from './useTheme';
-export const Text = /*#__PURE__*/React.forwardRef(({
-  style,
-  ...rest
-}, ref) => {
-  const {
-    foundations
-  } = useTheme();
-  return /*#__PURE__*/React.createElement(RNText, _extends({
-    ref: ref,
-    style: [{
-      fontFamily: foundations.typography.fontFamily
-    }, style]
-  }, rest));
-});
-Text.displayName = 'Text';
+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)}import React from"react";import{Text as RNText}from"react-native";import{useTheme}from"./useTheme";export const Text=React.forwardRef(({style:e,...t},r)=>{const{foundations:n}=useTheme();return React.createElement(RNText,_extends({ref:r,style:[{fontFamily:n.typography.fontFamily},e]},t))});Text.displayName="Text";