@webority/mobile-ui 0.0.38 → 0.1.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
+import e,{forwardRef as t,useEffect as i,useMemo as r,useRef as o}from"react";import{ActivityIndicator as n,Animated as s,Easing as a,StyleSheet as l,Text as c,View as d}from"react-native";import{createAnimatedValue as u,useTheme as g}from"../../theme/index.js";import{smoothCorners as m}from"../../utils/corners.js";import{squircleHostRadius as y}from"../../utils/squircle.js";import{SquircleFill as p,useSquircle as h}from"../SquircleFill/SquircleFill.js";import{jsx as b,jsxs as f}from"react/jsx-runtime";const v={sm:20,md:32,lg:48},Dot=({size:e,color:t,delay:r,duration:n})=>{const l=o(u(1)).current;return i(()=>{const e=s.loop(s.sequence([s.delay(r),s.timing(l,{toValue:1.4,duration:n/2,easing:a.out(a.quad),useNativeDriver:!0}),s.timing(l,{toValue:1,duration:n/2,easing:a.in(a.quad),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[l,r,n]),b(s.View,{style:{width:e,height:e,borderRadius:e/2,...m,backgroundColor:t,transform:[{scale:l}]}})},z=t((e,t)=>{const{size:l="md",color:m,message:z,overlay:x=!1,backdropColor:C,variant:j="circular",accessibilityLabel:w,style:I,testID:R}=e,k=g(),L=o(u(0)).current;i(()=>{s.timing(L,{toValue:1,duration:k.motion.duration.normal,easing:a.bezier(...k.motion.easing.standard),useNativeDriver:!0}).start()},[L,k]);const q=r(()=>buildStyles(k),[k]),D=v[l],S=m??k.colors.primary,V=C??k.colors.background.overlay,N=r(()=>{if("dots"===j){const e=Math.max(6,Math.round(D/4));return b(d,{style:[q.dotsRow,{gap:Math.round(e/2)}],children:Array.from({length:3}).map((t,i)=>b(Dot,{size:e,color:S,delay:150*i,duration:600},i))})}return b(n,{color:S,size:"sm"===l?"small":"large",style:{width:D,height:D}})},[j,l,D,S,q.dotsRow]),F=w??z??"Loading",M=h(x,k.radius.lg),W=M.active&&M.size?{borderRadius:y(M.size.width,M.size.height,k.radius.lg)}:null,A=f(s.View,{ref:t,accessible:!0,accessibilityRole:"progressbar",accessibilityLiveRegion:"polite",accessibilityLabel:F,accessibilityState:{busy:!0},testID:R,onLayout:M.onLayout,style:[x?q.overlayContent:q.inlineContent,W,{opacity:L}],children:[M.active&&M.size?b(p,{width:M.size.width,height:M.size.height,radius:k.radius.lg,fill:k.colors.background.elevated}):null,N,z?b(c,{style:[q.message,{color:k.colors.text.primary,fontSize:k.typography.fontSize.base,fontWeight:k.typography.fontWeight.medium,marginTop:k.spacing.md}],numberOfLines:2,children:z}):null]});return b(d,x?{pointerEvents:"auto",style:[q.overlay,{backgroundColor:V},I],children:A}:{style:[q.inline,I],children:A})});z.displayName="Spinner";const buildStyles=e=>l.create({inline:{alignItems:"center",justifyContent:"center"},inlineContent:{alignItems:"center",justifyContent:"center"},overlay:{...l.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3},overlayContent:{alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,...m,paddingHorizontal:e.spacing.xl,paddingVertical:e.spacing.xl,minWidth:140,...e.shadows.lg},dotsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},message:{textAlign:"center"}});export{z as Spinner};export default z;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Spinner } from "./Spinner.js";
-//# sourceMappingURL=index.js.map
+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
+import{useCallback as t,useState as i}from"react";import{Animated as e,Platform as o,StyleSheet as r,View as n}from"react-native";import l,{Path as s}from"react-native-svg";import{squircleApplies as h,squirclePath as a}from"../../utils/squircle.js";import{jsx as c}from"react/jsx-runtime";const d=e.createAnimatedComponent(s);export function SquircleFill({width:t,height:i,radius:e,fill:o,stroke:r,strokeWidth:s=0,outset:h=0,testID:m}){const p=s>0&&void 0!==r&&"transparent"!==r,v=a({width:t,height:i,radius:e,inset:p?s/2:0});return c(n,{pointerEvents:"none",style:[u.overlay,h?{top:-h,left:-h,right:-h,bottom:-h}:null],testID:m,children:c(l,{width:t,height:i,viewBox:`0 0 ${t} ${i}`,children:c(d,{d:v,fill:o,stroke:p?r:void 0,strokeWidth:p?s:void 0})})})}SquircleFill.displayName="SquircleFill";export function useSquircle(e,r,n){const[l,s]=i(null),a=e&&"android"===o.OS;return{onLayout:t(t=>{if(a){const{width:i,height:e}=t.nativeEvent.layout;s(t=>t&&t.width===i&&t.height===e?t:{width:i,height:e})}n?.(t)},[a,n]),size:l,active:a&&null!==l&&h(l.width,l.height,r)}}const u=r.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});

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

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

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

@@ -0,0 +1 @@
+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
+import e,{forwardRef as t,useMemo as r}from"react";import{StyleSheet as o,Text as s,View as n}from"react-native";import{fontFor as i,useTheme as a}from"../../theme/index.js";import{tintOf as l}from"../../utils/color.js";import{smoothCorners as c}from"../../utils/corners.js";import{Skeleton as d}from"../Skeleton/index.js";import{jsx as u,jsxs as g}from"react/jsx-runtime";const b={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},m=t((e,t)=>{const{label:o,tone:d="neutral",variant:m="soft",size:h="md",dot:p=!1,color:x,loading:y=!1,accessibilityLabel:S,style:k,textStyle:z,testID:j}=e,w=a(),H=b[h],v=r(()=>((e,t,r,o)=>{const s="string"==typeof(n=o)&&/^#[0-9a-f]{6}$/i.test(n);var n;const{base:i,on:a}=s?{base:o,on:e.colors.text.inverse}:((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}}})(e,t),c=!s&&"neutral"===t,d=c?e.colors.background.tertiary:l(i,.14,e.colors.background.secondary),u=c?e.colors.border.primary:l(i,.4,i);switch(r){case"solid":return{fill:i,border:i,text:a,dot:a};case"outline":return{fill:"transparent",border:c?u:i,text:i,dot:i};default:return{fill:d,border:u,text:i,dot:i}}})(w,d,m,x),[w,d,m,x]);return y?u(StatusBadgeSkeleton,{...e}):g(n,{ref:t,accessible:!0,accessibilityRole:"text",accessibilityLabel:S??o,testID:j,style:[f.base,{minHeight:H.height,paddingHorizontal:H.paddingH,borderRadius:w.radius.full,...c,backgroundColor:v.fill,borderColor:v.border,borderWidth:1},k],children:[p?u(n,{testID:"status-badge-dot",style:{width:H.dot,height:H.dot,borderRadius:H.dot/2,marginRight:H.gap,backgroundColor:v.dot}}):null,u(s,{style:[f.label,{color:v.text,fontSize:H.fontSize,...i(w,"semibold")},z],numberOfLines:1,maxFontSizeMultiplier:w.maxFontSizeMultiplier,children:o})]})});m.displayName="StatusBadge";const StatusBadgeSkeleton=({label:e,size:t="md",dot:r,style:o})=>{const s=b[t],n=Math.max(32,Math.min(120,6.5*(e??"").length))+2*s.paddingH+(r?s.dot+s.gap:0);return u(d,{width:n,height:s.height,radius:s.height/2,style:[f.skeleton,o]})};StatusBadgeSkeleton.displayName="StatusBadgeSkeleton",m.Skeleton=StatusBadgeSkeleton;const f=o.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},skeleton:{alignSelf:"flex-start"}});export{m as StatusBadge};export default m;

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

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