@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Spinner/Spinner.js

@@ -1,199 +1 @@
-"use strict";
-
-import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
-import { ActivityIndicator, Animated, Easing, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { squircleHostRadius } from "../../utils/squircle.js";
-import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMap = {
-  sm: 20,
-  md: 32,
-  lg: 48
-};
-const DOT_COUNT = 3;
-const DOT_STAGGER_MS = 150;
-const DOT_CYCLE_MS = 600;
-const Dot = ({
-  size,
-  color,
-  delay,
-  duration
-}) => {
-  const scale = useRef(createAnimatedValue(1)).current;
-  useEffect(() => {
-    const animation = Animated.loop(Animated.sequence([Animated.delay(delay), Animated.timing(scale, {
-      toValue: 1.4,
-      duration: duration / 2,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true
-    }), Animated.timing(scale, {
-      toValue: 1,
-      duration: duration / 2,
-      easing: Easing.in(Easing.quad),
-      useNativeDriver: true
-    })]));
-    animation.start();
-    return () => {
-      animation.stop();
-    };
-  }, [scale, delay, duration]);
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      ...smoothCorners,
-      backgroundColor: color,
-      transform: [{
-        scale
-      }]
-    }
-  });
-};
-const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    size = 'md',
-    color,
-    message,
-    overlay = false,
-    backdropColor,
-    variant = 'circular',
-    accessibilityLabel,
-    style,
-    testID
-  } = props;
-  const theme = useTheme();
-  const fade = useRef(createAnimatedValue(0)).current;
-  useEffect(() => {
-    Animated.timing(fade, {
-      toValue: 1,
-      duration: theme.motion.duration.normal,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    }).start();
-  }, [fade, theme]);
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const dimension = sizeMap[size];
-  const resolvedColor = color ?? theme.colors.primary;
-  const resolvedBackdrop = backdropColor ?? theme.colors.background.overlay;
-  const indicator = useMemo(() => {
-    if (variant === 'dots') {
-      const dotSize = Math.max(6, Math.round(dimension / 4));
-      return /*#__PURE__*/_jsx(View, {
-        style: [styles.dotsRow, {
-          gap: Math.round(dotSize / 2)
-        }],
-        children: Array.from({
-          length: DOT_COUNT
-        }).map((_, i) => /*#__PURE__*/_jsx(Dot, {
-          size: dotSize,
-          color: resolvedColor,
-          delay: i * DOT_STAGGER_MS,
-          duration: DOT_CYCLE_MS
-        }, i))
-      });
-    }
-    return /*#__PURE__*/_jsx(ActivityIndicator, {
-      color: resolvedColor,
-      size: size === 'sm' ? 'small' : 'large',
-      style: {
-        width: dimension,
-        height: dimension
-      }
-    });
-  }, [variant, size, dimension, resolvedColor, styles.dotsRow]);
-  const a11yLabel = accessibilityLabel ?? message ?? 'Loading';
-
-  // Android smooth corners for the overlay card. The host keeps its opaque
-  // background, because its elevation shadow is cast from the view's own
-  // outline; its native corner is pushed deeper so it hides under the
-  // squircle (see squircleHostRadius).
-  const squircle = useSquircle(overlay, theme.radius.lg);
-  const hostRadius = squircle.active && squircle.size ? {
-    borderRadius: squircleHostRadius(squircle.size.width, squircle.size.height, theme.radius.lg)
-  } : null;
-  const inner = /*#__PURE__*/_jsxs(Animated.View, {
-    ref: ref,
-    accessible: true,
-    accessibilityRole: "progressbar",
-    accessibilityLiveRegion: "polite",
-    accessibilityLabel: a11yLabel,
-    accessibilityState: {
-      busy: true
-    },
-    testID: testID,
-    onLayout: squircle.onLayout,
-    style: [overlay ? styles.overlayContent : styles.inlineContent, hostRadius, {
-      opacity: fade
-    }],
-    children: [squircle.active && squircle.size ? /*#__PURE__*/_jsx(SquircleFill, {
-      width: squircle.size.width,
-      height: squircle.size.height,
-      radius: theme.radius.lg,
-      fill: theme.colors.background.elevated
-    }) : null, indicator, message ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.message, {
-        color: theme.colors.text.primary,
-        fontSize: theme.typography.fontSize.base,
-        fontWeight: theme.typography.fontWeight.medium,
-        marginTop: theme.spacing.md
-      }],
-      numberOfLines: 2,
-      children: message
-    }) : null]
-  });
-  if (overlay) {
-    return /*#__PURE__*/_jsx(View, {
-      pointerEvents: "auto",
-      style: [styles.overlay, {
-        backgroundColor: resolvedBackdrop
-      }, style],
-      children: inner
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.inline, style],
-    children: inner
-  });
-});
-Spinner.displayName = 'Spinner';
-const buildStyles = theme => StyleSheet.create({
-  inline: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  inlineContent: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  overlay: {
-    ...StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 1000
-  },
-  overlayContent: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.colors.background.elevated,
-    borderRadius: theme.radius.lg,
-    ...smoothCorners,
-    paddingHorizontal: theme.spacing.xl,
-    paddingVertical: theme.spacing.xl,
-    minWidth: 140,
-    ...theme.shadows.lg
-  },
-  dotsRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  message: {
-    textAlign: 'center'
-  }
-});
-export { Spinner };
-export default Spinner;
-//# sourceMappingURL=Spinner.js.map
+"use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{ActivityIndicator,Animated,Easing,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{squircleHostRadius}from"../../utils/squircle.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:20,md:32,lg:48},DOT_COUNT=3,DOT_STAGGER_MS=150,DOT_CYCLE_MS=600,Dot=({size:e,color:t,delay:i,duration:r})=>{const s=useRef(createAnimatedValue(1)).current;return useEffect(()=>{const e=Animated.loop(Animated.sequence([Animated.delay(i),Animated.timing(s,{toValue:1.4,duration:r/2,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(s,{toValue:1,duration:r/2,easing:Easing.in(Easing.quad),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[s,i,r]),_jsx(Animated.View,{style:{width:e,height:e,borderRadius:e/2,...smoothCorners,backgroundColor:t,transform:[{scale:s}]}})},Spinner=forwardRef((e,t)=>{const{size:i="md",color:r,message:s,overlay:n=!1,backdropColor:o,variant:a="circular",accessibilityLabel:l,style:c,testID:u}=e,d=useTheme(),m=useRef(createAnimatedValue(0)).current;useEffect(()=>{Animated.timing(m,{toValue:1,duration:d.motion.duration.normal,easing:Easing.bezier(...d.motion.easing.standard),useNativeDriver:!0}).start()},[m,d]);const g=useMemo(()=>buildStyles(d),[d]),y=sizeMap[i],h=r??d.colors.primary,p=o??d.colors.background.overlay,f=useMemo(()=>{if("dots"===a){const e=Math.max(6,Math.round(y/4));return _jsx(View,{style:[g.dotsRow,{gap:Math.round(e/2)}],children:Array.from({length:3}).map((t,i)=>_jsx(Dot,{size:e,color:h,delay:150*i,duration:600},i))})}return _jsx(ActivityIndicator,{color:h,size:"sm"===i?"small":"large",style:{width:y,height:y}})},[a,i,y,h,g.dotsRow]),b=l??s??"Loading",x=useSquircle(n,d.radius.lg),S=x.active&&x.size?{borderRadius:squircleHostRadius(x.size.width,x.size.height,d.radius.lg)}:null,j=_jsxs(Animated.View,{ref:t,accessible:!0,accessibilityRole:"progressbar",accessibilityLiveRegion:"polite",accessibilityLabel:b,accessibilityState:{busy:!0},testID:u,onLayout:x.onLayout,style:[n?g.overlayContent:g.inlineContent,S,{opacity:m}],children:[x.active&&x.size?_jsx(SquircleFill,{width:x.size.width,height:x.size.height,radius:d.radius.lg,fill:d.colors.background.elevated}):null,f,s?_jsx(Text,{style:[g.message,{color:d.colors.text.primary,fontSize:d.typography.fontSize.base,fontWeight:d.typography.fontWeight.medium,marginTop:d.spacing.md}],numberOfLines:2,children:s}):null]});return _jsx(View,n?{pointerEvents:"auto",style:[g.overlay,{backgroundColor:p},c],children:j}:{style:[g.inline,c],children:j})});Spinner.displayName="Spinner";const buildStyles=e=>StyleSheet.create({inline:{alignItems:"center",justifyContent:"center"},inlineContent:{alignItems:"center",justifyContent:"center"},overlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3},overlayContent:{alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,...smoothCorners,paddingHorizontal:e.spacing.xl,paddingVertical:e.spacing.xl,minWidth:140,...e.shadows.lg},dotsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},message:{textAlign:"center"}});export{Spinner};export default Spinner;

package/lib/module/components/Spinner/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Spinner } from "./Spinner.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,Spinner}from"./Spinner.js";

package/lib/module/components/SquircleFill/SquircleFill.js

@@ -1,110 +1 @@
-"use strict";
-
-/**
- * SquircleFill: the Android half of smooth corners.
- *
- * iOS rounds a view with Apple's continuous curve through
- * `borderCurve: 'continuous'` (`utils/corners`). Android has no such style,
- * so a host that wants the same look on Android draws its fill and border
- * as an SVG path laid over its own bounds, and paints itself transparent
- * behind it. Internal: `FieldBase`, `Button` and `Card` use it; apps get the
- * corners through those. No barrel on purpose: a directory without an
- * index.ts is an internal primitive, not a component of the public table.
- *
- * The overlay is absolutely positioned and inert to touches. It needs the
- * host's measured size, which `useSquircle` collects from the host's
- * `onLayout`; until the first layout the host keeps its native corner, so
- * the first frame shows a circular corner rather than no fill at all.
- *
- * Not a general clipping tool: children of the host are not clipped to the
- * shape, which is why hosts that must clip (a card with an image header, a
- * gradient button) keep their native corner.
- */
-
-import { useCallback, useState } from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import { squircleApplies, squirclePath } from "../../utils/squircle.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const AnimatedPath = Animated.createAnimatedComponent(Path);
-export function SquircleFill({
-  width,
-  height,
-  radius,
-  fill,
-  stroke,
-  strokeWidth = 0,
-  outset = 0,
-  testID
-}) {
-  const hasStroke = strokeWidth > 0 && stroke !== undefined && stroke !== 'transparent';
-  const inset = hasStroke ? strokeWidth / 2 : 0;
-  const d = squirclePath({
-    width,
-    height,
-    radius,
-    inset
-  });
-  return /*#__PURE__*/_jsx(View, {
-    pointerEvents: "none",
-    style: [styles.overlay, outset ? {
-      top: -outset,
-      left: -outset,
-      right: -outset,
-      bottom: -outset
-    } : null],
-    testID: testID,
-    children: /*#__PURE__*/_jsx(Svg, {
-      width: width,
-      height: height,
-      viewBox: `0 0 ${width} ${height}`,
-      children: /*#__PURE__*/_jsx(AnimatedPath, {
-        d: d
-        // react-native-svg types colours as strings; an Animated node is
-        // resolved to one by `createAnimatedComponent` before it reaches Path.
-        ,
-        fill: fill,
-        stroke: hasStroke ? stroke : undefined,
-        strokeWidth: hasStroke ? strokeWidth : undefined
-      })
-    })
-  });
-}
-SquircleFill.displayName = 'SquircleFill';
-/**
- * Tracks a host's size for `SquircleFill`. On iOS (and when `enabled` is
- * false) it only forwards the layout event and never re-renders the host.
- */
-export function useSquircle(enabled, radius, onLayoutProp) {
-  const [size, setSize] = useState(null);
-  const track = enabled && Platform.OS === 'android';
-  const onLayout = useCallback(event => {
-    if (track) {
-      const {
-        width,
-        height
-      } = event.nativeEvent.layout;
-      setSize(prev => prev && prev.width === width && prev.height === height ? prev : {
-        width,
-        height
-      });
-    }
-    onLayoutProp?.(event);
-  }, [track, onLayoutProp]);
-  const active = track && size !== null && squircleApplies(size.width, size.height, radius);
-  return {
-    onLayout,
-    size,
-    active
-  };
-}
-const styles = StyleSheet.create({
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-});
-//# sourceMappingURL=SquircleFill.js.map
+"use strict";import{useCallback,useState}from"react";import{Animated,Platform,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{squircleApplies,squirclePath}from"../../utils/squircle.js";import{jsx as _jsx}from"react/jsx-runtime";const AnimatedPath=Animated.createAnimatedComponent(Path);export function SquircleFill({width:t,height:e,radius:i,fill:r,stroke:s,strokeWidth:o=0,outset:l=0,testID:a}){const n=o>0&&void 0!==s&&"transparent"!==s,h=squirclePath({width:t,height:e,radius:i,inset:n?o/2:0});return _jsx(View,{pointerEvents:"none",style:[styles.overlay,l?{top:-l,left:-l,right:-l,bottom:-l}:null],testID:a,children:_jsx(Svg,{width:t,height:e,viewBox:`0 0 ${t} ${e}`,children:_jsx(AnimatedPath,{d:h,fill:r,stroke:n?s:void 0,strokeWidth:n?o:void 0})})})}SquircleFill.displayName="SquircleFill";export function useSquircle(t,e,i){const[r,s]=useState(null),o=t&&"android"===Platform.OS;return{onLayout:useCallback(t=>{if(o){const{width:e,height:i}=t.nativeEvent.layout;s(t=>t&&t.width===e&&t.height===i?t:{width:e,height:i})}i?.(t)},[o,i]),size:r,active:o&&null!==r&&squircleApplies(r.width,r.height,e)}}const styles=StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});

package/lib/module/components/StatTile/StatTile.js

@@ -0,0 +1 @@
+"use strict";import{forwardRef}from"react";import{StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{Card}from"../Card/index.js";import{IconBadge}from"../IconBadge/index.js";import{Skeleton}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const isText=e=>"string"==typeof e||"number"==typeof e,StatTile=forwardRef((e,t)=>{const{label:i,value:s,icon:r,iconVariant:n,tone:o="primary",caption:l,onPress:a,loading:c=!1,accessibilityLabel:x,style:d,testID:m}=e,h=useTheme(),p=x??(isText(s)?`${i}, ${s}`:void 0);return _jsx(Card,c?{ref:t,variant:"outlined",style:d,testID:m,children:_jsxs(View,{style:[styles.row,{columnGap:h.spacing.md}],children:[void 0===r?null:_jsx(Skeleton,{shape:"circle",width:40,height:40}),_jsxs(View,{style:styles.text,children:[_jsx(Skeleton,{shape:"text",width:"50%",height:12}),_jsx(Skeleton,{shape:"text",width:"35%",height:24,style:{marginTop:h.spacing.xs}})]})]})}:{ref:t,variant:"outlined",onPress:a,accessibilityLabel:p,style:d,testID:m,children:_jsxs(View,{style:[styles.row,{columnGap:h.spacing.md}],children:[void 0===r?null:_jsx(IconBadge,{icon:r,iconVariant:n,tone:o}),_jsxs(View,{style:styles.text,children:[_jsx(Text,{variant:"caption",color:"secondary",numberOfLines:1,children:i}),isText(s)?_jsx(Text,{variant:"h3",numberOfLines:1,children:s}):s,null==l||""===l?null:isText(l)?_jsx(Text,{variant:"caption",color:"tertiary",numberOfLines:1,children:l}):l]})]})})});StatTile.displayName="StatTile";const styles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},text:{flex:1,minWidth:0}});export{StatTile};export default StatTile;

package/lib/module/components/StatTile/index.js

@@ -0,0 +1 @@
+"use strict";export{default,StatTile}from"./StatTile.js";

package/lib/module/components/StatusBadge/StatusBadge.js

@@ -1,229 +1 @@
-"use strict";
-
-import React, { forwardRef, useMemo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
-import { tintOf } from "../../utils/color.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { Skeleton } from "../Skeleton/index.js";
-
-/**
- * The same semantic vocabulary Chip and Badge use, and the web library's
- * `AppStatusBadge` (its `danger` is `error` here, the mobile theme's name).
- * A semantic name survives a palette change; a colour name does not.
- */
-
-/**
- * `soft` is the default: the tone at a light tint behind text in the tone,
- * with a border in the tone so the pill has an edge on any surface. `outline`
- * drops the fill. `solid` fills with the tone and draws the text on it.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMap = {
-  sm: {
-    height: 22,
-    paddingH: 8,
-    fontSize: 11,
-    dot: 5,
-    gap: 5
-  },
-  md: {
-    height: 24,
-    paddingH: 10,
-    fontSize: 12,
-    dot: 6,
-    gap: 6
-  }
-};
-
-/** Opacity of the tone behind a soft badge's text; the same as Button's soft fill. */
-const SOFT_FILL_OPACITY = 0.14;
-/**
- * Opacity of the tone in a soft badge's border. Full strength next to a 14%
- * tint reads as a heavy ring; a lighter shade of the status colour is the
- * usual edge on a tinted pill.
- */
-const SOFT_BORDER_OPACITY = 0.4;
-const BORDER_WIDTH = 1;
-/** The tone's base colour and the ink that sits on its solid fill. */
-const toneFor = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return {
-        base: theme.colors.success,
-        on: theme.colors.onSuccess
-      };
-    case 'warning':
-      return {
-        base: theme.colors.warning,
-        on: theme.colors.onWarning
-      };
-    case 'error':
-      return {
-        base: theme.colors.error,
-        on: theme.colors.onError
-      };
-    case 'info':
-      return {
-        base: theme.colors.info,
-        on: theme.colors.onInfo
-      };
-    case 'primary':
-      return {
-        base: theme.colors.primary,
-        on: theme.colors.onPrimary
-      };
-    case 'neutral':
-    default:
-      // Neutral has no tone to tint: it takes the theme's surface greys and
-      // the secondary text tier, which reads on its own tint where the
-      // tertiary tier does not.
-      return {
-        base: theme.colors.text.secondary,
-        on: theme.colors.text.inverse
-      };
-  }
-};
-const isHex = value => typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value);
-const paletteFor = (theme, tone, variant, color) => {
-  const custom = isHex(color);
-  const {
-    base,
-    on
-  } = custom ?
-  // A custom colour has no themed on-colour of its own. The inverse text
-  // colour is right for the bright status colours apps actually send.
-  {
-    base: color,
-    on: theme.colors.text.inverse
-  } : toneFor(theme, tone);
-  const neutral = !custom && tone === 'neutral';
-  const tint = neutral ? theme.colors.background.tertiary : tintOf(base, SOFT_FILL_OPACITY, theme.colors.background.secondary);
-  const edge = neutral ? theme.colors.border.primary : tintOf(base, SOFT_BORDER_OPACITY, base);
-  switch (variant) {
-    case 'solid':
-      return {
-        fill: base,
-        border: base,
-        text: on,
-        dot: on
-      };
-    case 'outline':
-      return {
-        fill: 'transparent',
-        border: neutral ? edge : base,
-        text: base,
-        dot: base
-      };
-    case 'soft':
-    default:
-      return {
-        fill: tint,
-        border: edge,
-        text: base,
-        dot: base
-      };
-  }
-};
-const StatusBadge = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    label,
-    tone = 'neutral',
-    variant = 'soft',
-    size = 'md',
-    dot = false,
-    color,
-    loading = false,
-    accessibilityLabel,
-    style,
-    textStyle,
-    testID
-  } = props;
-  const theme = useTheme();
-  const sz = sizeMap[size];
-  const palette = useMemo(() => paletteFor(theme, tone, variant, color), [theme, tone, variant, color]);
-  if (loading) {
-    return /*#__PURE__*/_jsx(StatusBadgeSkeleton, {
-      ...props
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    accessible: true,
-    accessibilityRole: "text",
-    accessibilityLabel: accessibilityLabel ?? label,
-    testID: testID,
-    style: [styles.base, {
-      height: sz.height,
-      paddingHorizontal: sz.paddingH,
-      borderRadius: sz.height / 2,
-      ...smoothCorners,
-      backgroundColor: palette.fill,
-      borderColor: palette.border,
-      borderWidth: BORDER_WIDTH
-    }, style],
-    children: [dot ? /*#__PURE__*/_jsx(View, {
-      testID: "status-badge-dot",
-      style: {
-        width: sz.dot,
-        height: sz.dot,
-        borderRadius: sz.dot / 2,
-        marginRight: sz.gap,
-        backgroundColor: palette.dot
-      }
-    }) : null, /*#__PURE__*/_jsx(Text, {
-      style: [styles.label, {
-        color: palette.text,
-        fontSize: sz.fontSize,
-        ...fontFor(theme, 'semibold')
-      }, textStyle],
-      numberOfLines: 1,
-      allowFontScaling: false,
-      children: label
-    })]
-  });
-});
-StatusBadge.displayName = 'StatusBadge';
-
-/**
- * Placeholder shape for `<StatusBadge>`: a pill of the configured size, as
- * wide as the label would make it, with room for the dot when one is asked
- * for, so a list of statuses keeps its column width while it loads.
- */
-const StatusBadgeSkeleton = ({
-  label,
-  size = 'md',
-  dot,
-  style
-}) => {
-  const sz = sizeMap[size];
-  const labelWidth = Math.max(32, Math.min(120, (label ?? '').length * 6.5));
-  const width = labelWidth + sz.paddingH * 2 + (dot ? sz.dot + sz.gap : 0);
-  return /*#__PURE__*/_jsx(Skeleton, {
-    width: width,
-    height: sz.height,
-    radius: sz.height / 2,
-    style: [styles.skeleton, style]
-  });
-};
-StatusBadgeSkeleton.displayName = 'StatusBadgeSkeleton';
-StatusBadge.Skeleton = StatusBadgeSkeleton;
-const styles = StyleSheet.create({
-  base: {
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  label: {
-    textAlign: 'center',
-    includeFontPadding: false,
-    textAlignVertical: 'center'
-  },
-  skeleton: {
-    alignSelf: 'flex-start'
-  }
-});
-export { StatusBadge };
-export default StatusBadge;
-//# sourceMappingURL=StatusBadge.js.map
+"use strict";import React,{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary};default:return{base:e.colors.text.secondary,on:e.colors.text.inverse}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,o,r)=>{const s=isHex(r),{base:a,on:n}=s?{base:r,on:e.colors.text.inverse}:toneFor(e,t),i=!s&&"neutral"===t,l=i?e.colors.background.tertiary:tintOf(a,.14,e.colors.background.secondary),d=i?e.colors.border.primary:tintOf(a,.4,a);switch(o){case"solid":return{fill:a,border:a,text:n,dot:n};case"outline":return{fill:"transparent",border:i?d:a,text:a,dot:a};default:return{fill:l,border:d,text:a,dot:a}}},StatusBadge=forwardRef((e,t)=>{const{label:o,tone:r="neutral",variant:s="soft",size:a="md",dot:n=!1,color:i,loading:l=!1,accessibilityLabel:d,style:c,textStyle:u,testID:g}=e,f=useTheme(),m=sizeMap[a],b=useMemo(()=>paletteFor(f,r,s,i),[f,r,s,i]);return l?_jsx(StatusBadgeSkeleton,{...e}):_jsxs(View,{ref:t,accessible:!0,accessibilityRole:"text",accessibilityLabel:d??o,testID:g,style:[styles.base,{minHeight:m.height,paddingHorizontal:m.paddingH,borderRadius:f.radius.full,...smoothCorners,backgroundColor:b.fill,borderColor:b.border,borderWidth:1},c],children:[n?_jsx(View,{testID:"status-badge-dot",style:{width:m.dot,height:m.dot,borderRadius:m.dot/2,marginRight:m.gap,backgroundColor:b.dot}}):null,_jsx(Text,{style:[styles.label,{color:b.text,fontSize:m.fontSize,...fontFor(f,"semibold")},u],numberOfLines:1,maxFontSizeMultiplier:f.maxFontSizeMultiplier,children:o})]})});StatusBadge.displayName="StatusBadge";const StatusBadgeSkeleton=({label:e,size:t="md",dot:o,style:r})=>{const s=sizeMap[t],a=Math.max(32,Math.min(120,6.5*(e??"").length))+2*s.paddingH+(o?s.dot+s.gap:0);return _jsx(Skeleton,{width:a,height:s.height,radius:s.height/2,style:[styles.skeleton,r]})};StatusBadgeSkeleton.displayName="StatusBadgeSkeleton",StatusBadge.Skeleton=StatusBadgeSkeleton;const styles=StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},skeleton:{alignSelf:"flex-start"}});export{StatusBadge};export default StatusBadge;

package/lib/module/components/StatusBadge/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, StatusBadge } from "./StatusBadge.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,StatusBadge}from"./StatusBadge.js";