@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Card/Card.js

@@ -1,403 +1 @@
-"use strict";
-
-import React, { forwardRef, useMemo } from 'react';
-import { Animated, Image, Pressable, StyleSheet, View } from 'react-native';
-import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { Gradient, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import { supportsBoxShadow, toBoxShadow } from "../../utils/shadows.js";
-import { squircleHostRadius } from "../../utils/squircle.js";
-import { Skeleton, SkeletonText } from "../Skeleton/index.js";
-import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const paddingMap = {
-  none: 'none',
-  sm: 'sm',
-  md: 'lg',
-  lg: 'xl',
-  xl: '2xl'
-};
-const Card = /*#__PURE__*/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 = useTheme();
-  const isInteractive = interactive || typeof onPress === 'function';
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = usePressAnimation({
-    enabled: isInteractive
-  });
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const hasImage = Boolean(imageSource);
-  const contentPadding = theme.spacing[paddingMap[padding]];
-  const resolvedGradient = 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 = 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 = 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' && supportsBoxShadow() ? 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 = 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 ? squircleHostRadius(squircle.size.width, squircle.size.height, resolvedBorderRadius) : resolvedBorderRadius,
-      ...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 = 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,
-      ...smoothCorners
-    };
-  }, [resolvedBorderRadius, imageAspectRatio, imageHeight]);
-  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [header ? /*#__PURE__*/_jsx(View, {
-      style: [styles.header, headerStyle],
-      children: header
-    }) : null, /*#__PURE__*/_jsx(View, {
-      style: [header || footer ? styles.body : null, bodyStyle],
-      children: children
-    }), footer ? /*#__PURE__*/_jsx(View, {
-      style: [styles.footer, footerStyle],
-      children: footer
-    }) : null]
-  });
-  const baseContent = hasImage ? /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.imageWrapper,
-      children: [/*#__PURE__*/_jsx(Image, {
-        source: imageSource,
-        resizeMode: "cover",
-        style: imageStyle,
-        accessibilityLabel: "",
-        accessible: false
-      }), imageOverlay ? /*#__PURE__*/_jsx(View, {
-        pointerEvents: "box-none",
-        style: styles.imageOverlay,
-        children: imageOverlay
-      }) : null]
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        padding: contentPadding
-      },
-      children: innerContent
-    })]
-  }) : innerContent;
-  const content = resolvedGradient ? /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Gradient, {
-      gradient: resolvedGradient,
-      style: StyleSheet.absoluteFill
-    }), baseContent]
-  }) : squircle.active && squircle.size ? /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(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 = resolveHaptic(haptic, 'selection');
-      if (h) {
-        triggerHaptic(h);
-      }
-      onPress?.(event);
-    };
-    rendered = /*#__PURE__*/_jsx(Animated.View, {
-      style: [{
-        transform: [{
-          scale
-        }]
-      }],
-      children: /*#__PURE__*/_jsx(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__*/_jsx(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__*/_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 = 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__*/_jsxs(View, {
-    style: [{
-      backgroundColor,
-      borderRadius: cornerRadius,
-      ...smoothCorners,
-      borderWidth,
-      borderColor,
-      overflow: 'hidden'
-    }, containerStyle, style],
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: [imageSource !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
-      width: "100%",
-      height: imageAspectRatio ? undefined : imageHeight,
-      style: imageAspectRatio ? {
-        aspectRatio: imageAspectRatio,
-        width: '100%'
-      } : undefined
-    }) : null, header !== undefined ? /*#__PURE__*/_jsx(View, {
-      style: [{
-        padding: padValue,
-        paddingBottom: theme.spacing.sm
-      }, headerStyle],
-      children: /*#__PURE__*/_jsx(Skeleton, {
-        shape: "text",
-        width: "60%",
-        height: 18
-      })
-    }) : null, /*#__PURE__*/_jsx(View, {
-      style: [{
-        padding: padValue
-      }, bodyStyle],
-      children: /*#__PURE__*/_jsx(SkeletonText, {
-        lines: 3,
-        fontSize: 14,
-        lastLineWidth: "55%"
-      })
-    }), footer !== undefined ? /*#__PURE__*/_jsx(View, {
-      style: [{
-        padding: padValue,
-        paddingTop: theme.spacing.sm,
-        flexDirection: 'row'
-      }, footerStyle],
-      children: /*#__PURE__*/_jsx(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 => StyleSheet.create({
-  header: {
-    marginBottom: theme.spacing.md
-  },
-  body: {
-    flexShrink: 1
-  },
-  footer: {
-    marginTop: theme.spacing.md
-  },
-  imageWrapper: {
-    position: 'relative'
-  },
-  imageOverlay: {
-    ...StyleSheet.absoluteFill
-  }
-});
-export { Card };
-export default Card;
-//# sourceMappingURL=Card.js.map
+"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Image,Pressable,StyleSheet,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{Gradient,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{squircleHostRadius}from"../../utils/squircle.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=forwardRef((e,t)=>{const{children:o,variant:i="elevated",elevation:r="sm",radius:s="lg",padding:l="md",interactive:a=!1,bg:n,header:d,title:c,lead:u,action:h,headerActions:p,collapsible:m=!1,collapsed:g,defaultCollapsed:b=!1,onCollapsedChange:y,collapsedSummary:x,onRemove:S,removeLabel:f="Remove",separatorHeight:v=StyleSheet.hairlineWidth,footer:j,imageSource:C,imageHeight:_=160,imageAspectRatio:w,imageOverlay:k,loading:R=!1,gradient:A,onPress:T,haptic:B,accessibilityLabel:H,accessibilityHint:I,accessibilityRole:P,style:V,containerStyle:L,headerStyle:F,bodyStyle:z,footerStyle:q,borderRadius:M,testID:W,onLayout:D,...O}=e,N=useTheme(),E=a||"function"==typeof T,{scale:G,pressIn:$,pressOut:U}=usePressAnimation({enabled:E}),J=useMemo(()=>buildStyles(N),[N]),K=Boolean(C),Q=N.spacing[paddingMap[l]],X=useMemo(()=>A?"string"==typeof A?N.gradients[A]??null:A:null,[A,N.gradients]),Y="flat"===i,Z=Y?0:M??N.radius[s],ee=resolveBackground(N,n),[te,oe]=useControllableState({value:g,defaultValue:b,onChange:y}),ie=m&&te,re=hasBuiltInHeaderContent(e),se=Boolean(d)||re,le=useSquircle(!K&&!X&&!Y,Z,D),ae=StyleSheet.flatten([V,L])??{},ne=ae.backgroundColor,de=ae.borderColor,ce=ne??ee??("filled"===i?N.colors.background.secondary:N.colors.background.elevated),ue="outlined"===i?N.colors.border.width:0,he=de??N.colors.border.primary,pe="elevated"===i&&supportsBoxShadow()?toBoxShadow(N.shadows[r]):void 0,me=le.active&&"elevated"===i&&!pe,ge=le.active&&!me?{backgroundColor:"transparent",borderColor:"transparent"}:null,be=useMemo(()=>{const e={borderRadius:me&&le.size?squircleHostRadius(le.size.width,le.size.height,Z):Z,...smoothCorners,padding:K?0:Q,overflow:le.active?"visible":"hidden"};switch(i){case"flat":return{...e,backgroundColor:ee??N.colors.background.elevated,borderBottomWidth:v,borderBottomColor:N.colors.border.primary};case"outlined":return{...e,backgroundColor:le.active?"transparent":ee??N.colors.background.elevated,borderWidth:N.colors.border.width,borderColor:le.active?"transparent":N.colors.border.primary};case"filled":return{...e,backgroundColor:le.active?"transparent":ee??N.colors.background.secondary};default:return{...e,backgroundColor:ee??N.colors.background.elevated,...pe?{boxShadow:pe}:N.shadows[r]}}},[N,i,r,Z,K,Q,le.active,le.size,pe,me,ee,v]),ye=useMemo(()=>({..."number"==typeof w?{width:"100%",aspectRatio:w}:{width:"100%",height:_},borderTopLeftRadius:Z,borderTopRightRadius:Z,borderBottomLeftRadius:0,borderBottomRightRadius:0,...smoothCorners}),[Z,w,_]),xe="string"==typeof c?c:"",Se=_jsxs(_Fragment,{children:[_jsxs(View,{style:J.titleColumn,children:["string"==typeof c?_jsx(Text,{variant:"title",accessibilityRole:"header",children:c}):c,u?_jsx(Text,{variant:"bodySmall",style:J.lead,children:u}):null,ie&&x?_jsx(Text,{variant:"caption",style:J.lead,children:x}):null]}),isCardTextAction(h)?_jsx(CardTextActionButton,{action:h,haptic:B}):h?_jsx(View,{style:J.actionNode,children:h}):null,p,m?_jsx(CardIconAction,{icon:ie?"chevron-down":"chevron-up",label:`${ie?"Show":"Hide"} ${xe}`.trim(),expanded:!ie,onPress:()=>oe(!ie),haptic:B}):null,S?_jsx(CardIconAction,{icon:"trash",label:f,onPress:S,color:N.colors.error,haptic:B}):null]}),fe=_jsxs(_Fragment,{children:[se?_jsx(View,{style:[J.header,!d&&J.headerRow,ie&&J.headerFolded,F],children:d??Se}):null,ie?null:_jsx(View,{style:[se||j?J.body:null,z],children:o}),j&&!ie?_jsx(View,{style:[J.footer,q],children:j}):null]}),ve=K?_jsxs(_Fragment,{children:[_jsxs(View,{style:J.imageWrapper,children:[_jsx(Image,{source:C,resizeMode:"cover",style:ye,accessibilityLabel:"",accessible:!1}),k?_jsx(View,{pointerEvents:"box-none",style:J.imageOverlay,children:k}):null]}),_jsx(View,{style:{padding:Q},children:fe})]}):fe,je=X?_jsxs(_Fragment,{children:[_jsx(Gradient,{gradient:X,style:StyleSheet.absoluteFill}),ve]}):le.active&&le.size?_jsxs(_Fragment,{children:[_jsx(SquircleFill,{width:le.size.width,height:le.size.height,radius:Z,fill:ce,stroke:ue?he:void 0,strokeWidth:ue,outset:ue}),ve]}):ve;let Ce;if(E){const handlePress=e=>{const t=resolveHaptic(B,"selection");t&&triggerHaptic(t),T?.(e)};Ce=_jsx(Animated.View,{style:[{transform:[{scale:G}]}],children:_jsx(Pressable,{ref:t,onPress:handlePress,onPressIn:$,onPressOut:U,android_ripple:{color:N.colors.surface.pressed,borderless:!1},accessibilityRole:P??"button",accessibilityLabel:H,accessibilityHint:I,testID:W,onLayout:le.onLayout,style:[be,V,L,ge],...O,children:je})})}else Ce=_jsx(View,{ref:t,accessibilityLabel:H,accessibilityHint:I,accessibilityRole:P,testID:W,onLayout:le.onLayout,style:[be,V,L,ge],children:je});return R?_jsx(CardSkeleton,{...e}):Ce});Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:o="lg",padding:i="md",bg:r,header:s,footer:l,imageSource:a,imageHeight:n=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:h,bodyStyle:p,footerStyle:m,style:g,...b})=>{const y=useTheme(),x=paddingMap[i],S=y.spacing[x],f="flat"===e?0:c??y.radius[o],v=void 0!==s||hasBuiltInHeaderContent(b),j=resolveBackground(y,r)??y.colors.background.elevated,C="outlined"===e?1:0,_="outlined"===e?y.colors.border.primary:void 0;return _jsxs(View,{style:[{backgroundColor:j,borderRadius:f,...smoothCorners,borderWidth:C,borderColor:_,overflow:"hidden"},u,g],accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[void 0!==a?_jsx(Skeleton,{width:"100%",height:d?void 0:n,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,v?_jsx(View,{style:[{padding:S,paddingBottom:y.spacing.sm},h],children:_jsx(Skeleton,{shape:"text",width:"60%",height:18})}):null,_jsx(View,{style:[{padding:S},p],children:_jsx(SkeletonText,{lines:3,fontSize:14,lastLineWidth:"55%"})}),void 0!==l?_jsx(View,{style:[{padding:S,paddingTop:y.spacing.sm,flexDirection:"row"},m],children:_jsx(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.isValidElement(e)&&"label"in e&&"onPress"in e,HIT_TARGET=44,CardIconAction=({icon:e,label:t,onPress:o,expanded:i,color:r,haptic:s})=>{const l=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===i?void 0:{expanded:i},onPress:()=>{const e=resolveHaptic(s,"selection");e&&triggerHaptic(e),o()},style:iconActionStyle,children:_jsx(AppIcon,{name:e,size:20,color:r??l.colors.text.primary})})},CardTextActionButton=({action:e,haptic:t})=>{const o=useTheme();return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,onPress:()=>{const o=resolveHaptic(t,"selection");o&&triggerHaptic(o),e.onPress()},style:textActionStyle,children:_jsx(Text,{variant:"label",weight:"semibold",color:o.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=>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:{...StyleSheet.absoluteFill}});export{Card};export default Card;

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

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