@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/Card/Card.js

@@ -1,407 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Card = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _usePressAnimation = require("../../hooks/usePressAnimation.js");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _hapticUtils = require("../../utils/hapticUtils.js");
-var _shadows = require("../../utils/shadows.js");
-var _squircle = require("../../utils/squircle.js");
-var _index2 = require("../Skeleton/index.js");
-var _SquircleFill = require("../SquircleFill/SquircleFill.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const paddingMap = {
-  none: 'none',
-  sm: 'sm',
-  md: 'lg',
-  lg: 'xl',
-  xl: '2xl'
-};
-const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    children,
-    variant = 'elevated',
-    elevation = 'sm',
-    radius = 'lg',
-    padding = 'md',
-    interactive = false,
-    bg,
-    header,
-    footer,
-    imageSource,
-    imageHeight = 160,
-    imageAspectRatio,
-    imageOverlay,
-    loading = false,
-    gradient,
-    onPress,
-    haptic,
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityRole,
-    style,
-    containerStyle,
-    headerStyle,
-    bodyStyle,
-    footerStyle,
-    borderRadius,
-    testID,
-    onLayout,
-    ...rest
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const isInteractive = interactive || typeof onPress === 'function';
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = (0, _usePressAnimation.usePressAnimation)({
-    enabled: isInteractive
-  });
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const hasImage = Boolean(imageSource);
-  const contentPadding = theme.spacing[paddingMap[padding]];
-  const resolvedGradient = (0, _react.useMemo)(() => {
-    if (!gradient) {
-      return null;
-    }
-    if (typeof gradient === 'string') {
-      return theme.gradients[gradient] ?? null;
-    }
-    return gradient;
-  }, [gradient, theme.gradients]);
-  const resolvedBorderRadius = borderRadius ?? theme.radius[radius];
-  const resolvedBg = resolveBackground(theme, bg);
-
-  // Android smooth corners: the fill (and the outlined border) become an SVG
-  // squircle over the card. An image header or a gradient needs the card's
-  // circular `overflow: 'hidden'` clip, which would cut the squircle off at
-  // the diagonal, so those cards keep the native corner on Android.
-  const squircle = (0, _SquircleFill.useSquircle)(!hasImage && !resolvedGradient, resolvedBorderRadius, onLayout);
-
-  // An app colours a card through `bg`, or through `style` / `containerStyle`
-  // for anything older. Under the squircle the SVG path is what the user
-  // sees, so a consumer's background and border colours must reach it, or
-  // the path paints the theme's colour over them. Only the two colours are
-  // read; an inline style object would otherwise re-run every memo below.
-  // React Native types a colour as `ColorValue`, which admits a
-  // `PlatformColor` object; the library's colours are strings, and the
-  // SVG path takes a string or an Animated node, hence the cast.
-  const consumerStyle = _reactNative.StyleSheet.flatten([style, containerStyle]) ?? {};
-  const consumerBackground = consumerStyle.backgroundColor;
-  const consumerBorder = consumerStyle.borderColor;
-  const squircleFill = consumerBackground ?? resolvedBg ?? (variant === 'filled' ? theme.colors.background.secondary : theme.colors.background.elevated);
-  const squircleStroke = variant === 'outlined' ? theme.colors.border.width : 0;
-  const squircleStrokeColor = consumerBorder ?? theme.colors.border.primary;
-  // The elevated card draws its shadow as a `boxShadow` where the platform
-  // can (see `toBoxShadow`): iOS drops the legacy shadow props under the
-  // card's `overflow: 'hidden'`, and Android's `elevation` is a flat grey
-  // that cannot match iOS. Android below API 28 keeps `elevation`.
-  const elevatedBoxShadow = variant === 'elevated' && (0, _shadows.supportsBoxShadow)() ? (0, _shadows.toBoxShadow)(theme.shadows[elevation]) : undefined;
-  // Only an `elevation` shadow needs an opaque host under the squircle: it
-  // is cast from the view's own outline, and a transparent view casts none.
-  // A box shadow draws whatever the host's background.
-  const opaqueSquircleHost = squircle.active && variant === 'elevated' && !elevatedBoxShadow;
-  // Every other host must stay transparent under a consumer colour too, so
-  // this override is applied AFTER the consumer styles. The opaque host
-  // keeps its colour; the path paints the same colour over it, so its
-  // corner stays hidden.
-  const squircleHostOverride = squircle.active && !opaqueSquircleHost ? {
-    backgroundColor: 'transparent',
-    borderColor: 'transparent'
-  } : null;
-  const computedContainerStyle = (0, _react.useMemo)(() => {
-    const base = {
-      // Under the overlay an `elevation` card keeps an opaque native
-      // background for its shadow; its native corner must then hide under
-      // the squircle, which sits INSIDE the circle of the same radius, so
-      // the native radius is pushed deeper (see squircleHostRadius). A box
-      // shadow follows this radius, so every other host keeps the nominal
-      // one and the shadow hugs the visible corner.
-      borderRadius: opaqueSquircleHost && squircle.size ? (0, _squircle.squircleHostRadius)(squircle.size.width, squircle.size.height, resolvedBorderRadius) : resolvedBorderRadius,
-      ..._corners.smoothCorners,
-      // When an image header is present we move padding to the inner content
-      // wrapper so the image can occupy the card's full top edge.
-      padding: hasImage ? 0 : contentPadding,
-      // The squircle bulges past the circular corner at the diagonal; a
-      // rounded clip would remove exactly the part it draws.
-      overflow: squircle.active ? 'visible' : 'hidden'
-    };
-    switch (variant) {
-      case 'outlined':
-        return {
-          ...base,
-          // Under the squircle the host goes transparent; the width stays so
-          // the layout does not move by a pixel.
-          backgroundColor: squircle.active ? 'transparent' : resolvedBg ?? theme.colors.background.elevated,
-          borderWidth: theme.colors.border.width,
-          borderColor: squircle.active ? 'transparent' : theme.colors.border.primary
-        };
-      case 'filled':
-        return {
-          ...base,
-          backgroundColor: squircle.active ? 'transparent' : resolvedBg ?? theme.colors.background.secondary
-        };
-      case 'elevated':
-      default:
-        // Under the squircle a box-shadow host goes transparent through
-        // `squircleHostOverride`; an `elevation` host stays opaque, its
-        // corner hidden by the deeper radius set in `base` above.
-        return {
-          ...base,
-          backgroundColor: resolvedBg ?? theme.colors.background.elevated,
-          ...(elevatedBoxShadow ? {
-            boxShadow: elevatedBoxShadow
-          } : theme.shadows[elevation])
-        };
-    }
-  }, [theme, variant, elevation, resolvedBorderRadius, hasImage, contentPadding, squircle.active, squircle.size, elevatedBoxShadow, opaqueSquircleHost, resolvedBg]);
-  const imageStyle = (0, _react.useMemo)(() => {
-    const topRadius = resolvedBorderRadius;
-    const dimensions = typeof imageAspectRatio === 'number' ? {
-      width: '100%',
-      aspectRatio: imageAspectRatio
-    } : {
-      width: '100%',
-      height: imageHeight
-    };
-    // The image repeats the card's top radius, so it must repeat the curve
-    // too, or a circular image corner sits inside the card's continuous
-    // frame and a sliver of card background shows at the diagonal. React
-    // Native's `ImageStyle` type omits `borderCurve` though the native image
-    // view (a view subclass) honours it, hence the cast.
-    return {
-      ...dimensions,
-      borderTopLeftRadius: topRadius,
-      borderTopRightRadius: topRadius,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      ..._corners.smoothCorners
-    };
-  }, [resolvedBorderRadius, imageAspectRatio, imageHeight]);
-  const innerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.header, headerStyle],
-      children: header
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [header || footer ? styles.body : null, bodyStyle],
-      children: children
-    }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.footer, footerStyle],
-      children: footer
-    }) : null]
-  });
-  const baseContent = hasImage ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.imageWrapper,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-        source: imageSource,
-        resizeMode: "cover",
-        style: imageStyle,
-        accessibilityLabel: "",
-        accessible: false
-      }), imageOverlay ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "box-none",
-        style: styles.imageOverlay,
-        children: imageOverlay
-      }) : null]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        padding: contentPadding
-      },
-      children: innerContent
-    })]
-  }) : innerContent;
-  const content = resolvedGradient ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Gradient, {
-      gradient: resolvedGradient,
-      style: _reactNative.StyleSheet.absoluteFill
-    }), baseContent]
-  }) : squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
-      width: squircle.size.width,
-      height: squircle.size.height,
-      radius: resolvedBorderRadius,
-      fill: squircleFill,
-      stroke: squircleStroke ? squircleStrokeColor : undefined,
-      strokeWidth: squircleStroke,
-      outset: squircleStroke
-    }), baseContent]
-  }) : baseContent;
-  let rendered;
-  if (isInteractive) {
-    const handlePress = event => {
-      const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
-      if (h) {
-        (0, _hapticUtils.triggerHaptic)(h);
-      }
-      onPress?.(event);
-    };
-    rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [{
-        transform: [{
-          scale
-        }]
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        ref: ref,
-        onPress: handlePress,
-        onPressIn: pressIn,
-        onPressOut: pressOut,
-        android_ripple: {
-          color: theme.colors.surface.pressed,
-          borderless: false
-        },
-        accessibilityRole: accessibilityRole ?? 'button',
-        accessibilityLabel: accessibilityLabel,
-        accessibilityHint: accessibilityHint,
-        testID: testID,
-        onLayout: squircle.onLayout,
-        style: [computedContainerStyle, style, containerStyle, squircleHostOverride],
-        ...rest,
-        children: content
-      })
-    });
-  } else {
-    rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      ref: ref,
-      accessibilityLabel: accessibilityLabel,
-      accessibilityHint: accessibilityHint,
-      accessibilityRole: accessibilityRole,
-      testID: testID,
-      onLayout: squircle.onLayout,
-      style: [computedContainerStyle, style, containerStyle, squircleHostOverride],
-      children: content
-    });
-  }
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardSkeleton, {
-      ...props
-    });
-  }
-  return rendered;
-});
-Card.displayName = 'Card';
-
-/**
- * Placeholder shape for `<Card>`. Preserves outer chrome (variant, radius,
- * padding, image area) and fills the interior with header / body / footer
- * skeletons proportional to whichever slots the consumer actually uses.
- */
-const CardSkeleton = ({
-  variant = 'elevated',
-  elevation: _elevation,
-  radius = 'lg',
-  padding = 'md',
-  bg,
-  header,
-  footer,
-  imageSource,
-  imageHeight = 160,
-  imageAspectRatio,
-  borderRadius,
-  containerStyle,
-  headerStyle,
-  bodyStyle,
-  footerStyle,
-  style
-}) => {
-  const theme = (0, _index.useTheme)();
-  const padToken = paddingMap[padding];
-  const padValue = theme.spacing[padToken];
-  const cornerRadius = borderRadius ?? theme.radius[radius];
-  // The placeholder keeps the surface colour the card will take, so nothing
-  // shifts when data arrives; it does not read the filled variant's darker
-  // default because the skeleton bars already carry that contrast.
-  const backgroundColor = resolveBackground(theme, bg) ?? theme.colors.background.elevated;
-  const borderWidth = variant === 'outlined' ? 1 : 0;
-  const borderColor = variant === 'outlined' ? theme.colors.border.primary : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      backgroundColor,
-      borderRadius: cornerRadius,
-      ..._corners.smoothCorners,
-      borderWidth,
-      borderColor,
-      overflow: 'hidden'
-    }, containerStyle, style],
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: [imageSource !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-      width: "100%",
-      height: imageAspectRatio ? undefined : imageHeight,
-      style: imageAspectRatio ? {
-        aspectRatio: imageAspectRatio,
-        width: '100%'
-      } : undefined
-    }) : null, header !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [{
-        padding: padValue,
-        paddingBottom: theme.spacing.sm
-      }, headerStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-        shape: "text",
-        width: "60%",
-        height: 18
-      })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [{
-        padding: padValue
-      }, bodyStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonText, {
-        lines: 3,
-        fontSize: 14,
-        lastLineWidth: "55%"
-      })
-    }), footer !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [{
-        padding: padValue,
-        paddingTop: theme.spacing.sm,
-        flexDirection: 'row'
-      }, footerStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-        width: 88,
-        height: 32,
-        shape: "rounded"
-      })
-    }) : null]
-  });
-};
-CardSkeleton.displayName = 'CardSkeleton';
-Card.Skeleton = CardSkeleton;
-
-/** A `bg` prop as a colour: a background token by name, anything else as given. */
-const resolveBackground = (theme, bg) => {
-  if (bg == null) {
-    return undefined;
-  }
-  const tokens = theme.colors.background;
-  return tokens[bg] ?? bg;
-};
-const buildStyles = theme => _reactNative.StyleSheet.create({
-  header: {
-    marginBottom: theme.spacing.md
-  },
-  body: {
-    flexShrink: 1
-  },
-  footer: {
-    marginTop: theme.spacing.md
-  },
-  imageWrapper: {
-    position: 'relative'
-  },
-  imageOverlay: {
-    ..._reactNative.StyleSheet.absoluteFill
-  }
-});
-var _default = exports.default = Card;
-//# sourceMappingURL=Card.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Card=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_useControllableState=require("../../hooks/useControllableState.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_shadows=require("../../utils/shadows.js"),_squircle=require("../../utils/squircle.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_index2=require("../Skeleton/index.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_index3=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,o,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(s=t?r:i){if(s.has(e))return s.get(e);s.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?s(a,t,o):a[t]=e[t]);return a})(e,t)}const paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=exports.Card=(0,_react.forwardRef)((e,t)=>{const{children:i,variant:r="elevated",elevation:s="sm",radius:o="lg",padding:a="md",interactive:n=!1,bg:l,header:c,title:d,lead:u,action:h,headerActions:x,collapsible:p=!1,collapsed:_,defaultCollapsed:m=!1,onCollapsedChange:b,collapsedSummary:g,onRemove:y,removeLabel:j="Remove",separatorHeight:v=_reactNative.StyleSheet.hairlineWidth,footer:R,imageSource:f,imageHeight:S=160,imageAspectRatio:w,imageOverlay:C,loading:k=!1,gradient:q,onPress:N,haptic:A,accessibilityLabel:P,accessibilityHint:T,accessibilityRole:I,style:B,containerStyle:H,headerStyle:L,bodyStyle:V,footerStyle:F,borderRadius:W,testID:M,onLayout:z,...O}=e,U=(0,_index.useTheme)(),D=n||"function"==typeof N,{scale:E,pressIn:G,pressOut:$}=(0,_usePressAnimation.usePressAnimation)({enabled:D}),J=(0,_react.useMemo)(()=>buildStyles(U),[U]),K=Boolean(f),Q=U.spacing[paddingMap[a]],X=(0,_react.useMemo)(()=>q?"string"==typeof q?U.gradients[q]??null:q:null,[q,U.gradients]),Y="flat"===r,Z=Y?0:W??U.radius[o],ee=resolveBackground(U,l),[te,ie]=(0,_useControllableState.useControllableState)({value:_,defaultValue:m,onChange:b}),re=p&&te,se=hasBuiltInHeaderContent(e),oe=Boolean(c)||se,ae=(0,_SquircleFill.useSquircle)(!K&&!X&&!Y,Z,z),ne=_reactNative.StyleSheet.flatten([B,H])??{},le=ne.backgroundColor,ce=ne.borderColor,de=le??ee??("filled"===r?U.colors.background.secondary:U.colors.background.elevated),ue="outlined"===r?U.colors.border.width:0,he=ce??U.colors.border.primary,xe="elevated"===r&&(0,_shadows.supportsBoxShadow)()?(0,_shadows.toBoxShadow)(U.shadows[s]):void 0,pe=ae.active&&"elevated"===r&&!xe,_e=ae.active&&!pe?{backgroundColor:"transparent",borderColor:"transparent"}:null,me=(0,_react.useMemo)(()=>{const e={borderRadius:pe&&ae.size?(0,_squircle.squircleHostRadius)(ae.size.width,ae.size.height,Z):Z,..._corners.smoothCorners,padding:K?0:Q,overflow:ae.active?"visible":"hidden"};switch(r){case"flat":return{...e,backgroundColor:ee??U.colors.background.elevated,borderBottomWidth:v,borderBottomColor:U.colors.border.primary};case"outlined":return{...e,backgroundColor:ae.active?"transparent":ee??U.colors.background.elevated,borderWidth:U.colors.border.width,borderColor:ae.active?"transparent":U.colors.border.primary};case"filled":return{...e,backgroundColor:ae.active?"transparent":ee??U.colors.background.secondary};default:return{...e,backgroundColor:ee??U.colors.background.elevated,...xe?{boxShadow:xe}:U.shadows[s]}}},[U,r,s,Z,K,Q,ae.active,ae.size,xe,pe,ee,v]),be=(0,_react.useMemo)(()=>({..."number"==typeof w?{width:"100%",aspectRatio:w}:{width:"100%",height:S},borderTopLeftRadius:Z,borderTopRightRadius:Z,borderBottomLeftRadius:0,borderBottomRightRadius:0,..._corners.smoothCorners}),[Z,w,S]),ge="string"==typeof d?d:"",ye=(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:J.titleColumn,children:["string"==typeof d?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"title",accessibilityRole:"header",children:d}):d,u?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"bodySmall",style:J.lead,children:u}):null,re&&g?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"caption",style:J.lead,children:g}):null]}),isCardTextAction(h)?(0,_jsxRuntime.jsx)(CardTextActionButton,{action:h,haptic:A}):h?(0,_jsxRuntime.jsx)(_reactNative.View,{style:J.actionNode,children:h}):null,x,p?(0,_jsxRuntime.jsx)(CardIconAction,{icon:re?"chevron-down":"chevron-up",label:`${re?"Show":"Hide"} ${ge}`.trim(),expanded:!re,onPress:()=>ie(!re),haptic:A}):null,y?(0,_jsxRuntime.jsx)(CardIconAction,{icon:"trash",label:j,onPress:y,color:U.colors.error,haptic:A}):null]}),je=(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[oe?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[J.header,!c&&J.headerRow,re&&J.headerFolded,L],children:c??ye}):null,re?null:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[oe||R?J.body:null,V],children:i}),R&&!re?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[J.footer,F],children:R}):null]}),ve=K?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:J.imageWrapper,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:f,resizeMode:"cover",style:be,accessibilityLabel:"",accessible:!1}),C?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"box-none",style:J.imageOverlay,children:C}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{padding:Q},children:je})]}):je,Re=X?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:X,style:_reactNative.StyleSheet.absoluteFill}),ve]}):ae.active&&ae.size?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:ae.size.width,height:ae.size.height,radius:Z,fill:de,stroke:ue?he:void 0,strokeWidth:ue,outset:ue}),ve]}):ve;let fe;if(D){const handlePress=e=>{const t=(0,_hapticUtils.resolveHaptic)(A,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),N?.(e)};fe=(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[{transform:[{scale:E}]}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:t,onPress:handlePress,onPressIn:G,onPressOut:$,android_ripple:{color:U.colors.surface.pressed,borderless:!1},accessibilityRole:I??"button",accessibilityLabel:P,accessibilityHint:T,testID:M,onLayout:ae.onLayout,style:[me,B,H,_e],...O,children:Re})})}else fe=(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityLabel:P,accessibilityHint:T,accessibilityRole:I,testID:M,onLayout:ae.onLayout,style:[me,B,H,_e],children:Re});return k?(0,_jsxRuntime.jsx)(CardSkeleton,{...e}):fe});Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:i="lg",padding:r="md",bg:s,header:o,footer:a,imageSource:n,imageHeight:l=160,imageAspectRatio:c,borderRadius:d,containerStyle:u,headerStyle:h,bodyStyle:x,footerStyle:p,style:_,...m})=>{const b=(0,_index.useTheme)(),g=paddingMap[r],y=b.spacing[g],j="flat"===e?0:d??b.radius[i],v=void 0!==o||hasBuiltInHeaderContent(m),R=resolveBackground(b,s)??b.colors.background.elevated,f="outlined"===e?1:0,S="outlined"===e?b.colors.border.primary:void 0;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{backgroundColor:R,borderRadius:j,..._corners.smoothCorners,borderWidth:f,borderColor:S,overflow:"hidden"},u,_],accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[void 0!==n?(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:"100%",height:c?void 0:l,style:c?{aspectRatio:c,width:"100%"}:void 0}):null,v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:y,paddingBottom:b.spacing.sm},h],children:(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"text",width:"60%",height:18})}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:y},x],children:(0,_jsxRuntime.jsx)(_index2.SkeletonText,{lines:3,fontSize:14,lastLineWidth:"55%"})}),void 0!==a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:y,paddingTop:b.spacing.sm,flexDirection:"row"},p],children:(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:88,height:32,shape:"rounded"})}):null]})};CardSkeleton.displayName="CardSkeleton",Card.Skeleton=CardSkeleton;const hasBuiltInHeaderContent=e=>Boolean(e.title||e.lead||e.action||e.headerActions||e.collapsible||e.onRemove),isCardTextAction=e=>"object"==typeof e&&null!==e&&!_react.default.isValidElement(e)&&"label"in e&&"onPress"in e,HIT_TARGET=44,CardIconAction=({icon:e,label:t,onPress:i,expanded:r,color:s,haptic:o})=>{const a=(0,_index.useTheme)();return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===r?void 0:{expanded:r},onPress:()=>{const e=(0,_hapticUtils.resolveHaptic)(o,"selection");e&&(0,_hapticUtils.triggerHaptic)(e),i()},style:iconActionStyle,children:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:e,size:20,color:s??a.colors.text.primary})})},CardTextActionButton=({action:e,haptic:t})=>{const i=(0,_index.useTheme)();return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,onPress:()=>{const i=(0,_hapticUtils.resolveHaptic)(t,"selection");i&&(0,_hapticUtils.triggerHaptic)(i),e.onPress()},style:textActionStyle,children:(0,_jsxRuntime.jsx)(_index3.Text,{variant:"label",weight:"semibold",color:i.colors.primary,children:e.label})})},iconActionStyle={width:44,height:44,alignItems:"center",justifyContent:"center"},textActionStyle={minWidth:44,minHeight:44,alignItems:"center",justifyContent:"center"},resolveBackground=(e,t)=>{if(null==t)return;return e.colors.background[t]??t},buildStyles=e=>_reactNative.StyleSheet.create({header:{marginBottom:e.spacing.md},headerRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm},headerFolded:{marginBottom:0},titleColumn:{flex:1},lead:{marginTop:e.spacing.xs},actionNode:{flexShrink:0},body:{flexShrink:1},footer:{marginTop:e.spacing.md},imageWrapper:{position:"relative"},imageOverlay:{..._reactNative.StyleSheet.absoluteFill}});var _default=exports.default=Card;

package/lib/commonjs/components/Card/index.js

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function () {
-    return _Card.Card;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Card.default;
-  }
-});
-var _Card = _interopRequireWildcard(require("./Card.js"));
-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); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Card",{enumerable:!0,get:function(){return _Card.Card}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Card.default}});var _Card=_interopRequireWildcard(require("./Card.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var o,u,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=r?n:t){if(o.has(e))return o.get(e);o.set(e,a)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(u.get||u.set)?o(a,r,u):a[r]=e[r]);return a})(e,r)}