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

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

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