@mapples/components 1.1.2 → 1.2.0

package/dist/components/content/MediaCard/index.js

@@ -0,0 +1,115 @@
+import { forwardRef } from 'react';
+import { StyledImage, StyledPressable, StyledView, Typography, } from '@mapples/style';
+import { ELEVATION, RADII, Tokens, TYPOGRAPHY_PARTS, useTones, } from '@mapples/ui';
+import { useInteractionState } from '../../../internal';
+import { defaults } from './defaults';
+import { MEDIA_CARD_ASPECT_RATIO, MEDIA_CARD_THUMBNAIL, } from './types';
+/**
+ * A photo-topped tile for a product, place or article: image, title,
+ * subtitle, a trailing price/date and an optional tag over the photo. A
+ * leaf — grouped free-form content goes in `Card`.
+ *
+ * @example
+ * ```tsx
+ * <MediaCard
+ *   source={{ uri: 'https://…/loft.jpg' }}
+ *   title="Sunny loft"
+ *   subtitle="Lisbon · 2 guests"
+ *   meta="€120 / night"
+ *   tag="New"
+ *   onPress={open}
+ * />
+ * ```
+ *
+ * @public
+ */
+const MediaCard = forwardRef(({ source, title, subtitle, meta, tag, orientation = 'vertical', imageAspectRatio = MEDIA_CARD_ASPECT_RATIO, variant = 'elevated', onPress, onPressIn, onPressOut, onHoverIn, onHoverOut, disabled, styled, 
+// The canvas injects a drop area as children; leaf components ignore them.
+children: _children, ...rest }, ref) => {
+    const tones = useTones();
+    const interactive = !!onPress;
+    const interaction = useInteractionState({ onPressIn, onPressOut, onHoverIn, onHoverOut }, !!disabled);
+    const horizontal = orientation === 'horizontal';
+    const surface = tones.resolve(Tokens.color.surface);
+    const text = tones.resolve(Tokens.color.text);
+    const secondary = tones.resolve(Tokens.color.textSecondary);
+    const mediaGeometry = horizontal
+        ? { width: MEDIA_CARD_THUMBNAIL, height: MEDIA_CARD_THUMBNAIL }
+        : { width: '100%', aspectRatio: imageAspectRatio };
+    const style = [
+        defaults.root,
+        {
+            flexDirection: horizontal ? 'row' : 'column',
+            borderRadius: RADII.lg,
+            backgroundColor: variant === 'filled' ? tones.fill : surface,
+            borderWidth: variant === 'outlined' || tones.isDark ? 1 : 0,
+            borderColor: tones.outline,
+        },
+        variant === 'elevated' && { boxShadow: ELEVATION },
+        styled?.style,
+    ];
+    const body = (<>
+        <StyledView styled={{
+            style: [
+                defaults.media,
+                { overflow: 'hidden' },
+                !horizontal && { alignSelf: 'stretch' },
+            ],
+        }}>
+          {source ? (<StyledImage source={source} contentFit="cover" styled={{ style: [mediaGeometry, styled?.styleImage] }}/>) : (<StyledView styled={{
+                style: [
+                    mediaGeometry,
+                    { backgroundColor: tones.fill },
+                    styled?.styleImage,
+                ],
+            }}/>)}
+          {tag ? (<StyledView pointerEvents="none" styled={{
+                style: [
+                    defaults.tag,
+                    { borderRadius: RADII.pill, backgroundColor: surface },
+                    styled?.styleTag,
+                ],
+            }}>
+              <Typography variant={TYPOGRAPHY_PARTS.helper} numberOfLines={1} style={{ color: text }}>
+                {tag}
+              </Typography>
+            </StyledView>) : null}
+        </StyledView>
+        <StyledView styled={{
+            style: [
+                defaults.content,
+                horizontal && defaults.contentHorizontal,
+                styled?.styleContent,
+            ],
+        }}>
+          {title ? (<Typography variant={TYPOGRAPHY_PARTS.title} numberOfLines={2} style={[{ color: text }, styled?.styleTitle]}>
+              {title}
+            </Typography>) : null}
+          {subtitle ? (<Typography variant={TYPOGRAPHY_PARTS.helper} numberOfLines={2} style={[{ color: secondary }, styled?.styleSubtitle]}>
+              {subtitle}
+            </Typography>) : null}
+          {meta ? (<Typography variant={TYPOGRAPHY_PARTS.label} numberOfLines={1} style={[{ color: text }, styled?.styleMeta]}>
+              {meta}
+            </Typography>) : null}
+        </StyledView>
+        {interactive && (interaction.pressed || interaction.hovered) ? (<StyledView pointerEvents="none" styled={{
+                style: [
+                    defaults.stateLayer,
+                    {
+                        backgroundColor: tones.stateLayer(text, interaction.pressed ? 'pressed' : 'hover'),
+                    },
+                ],
+            }}/>) : null}
+      </>);
+    if (interactive) {
+        return (<StyledPressable ref={ref} accessibilityRole="button" accessibilityLabel={title} onPress={onPress} disabled={disabled} {...interaction.handlers} styled={{ style }} {...rest}>
+          {body}
+        </StyledPressable>);
+    }
+    return (<StyledView ref={ref} styled={{ style }} {...rest}>
+        {body}
+      </StyledView>);
+});
+MediaCard.displayName = 'MediaCard';
+export default MediaCard;
+//# sourceMappingURL=index.js.map

package/dist/components/content/MediaCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content/MediaCard/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/content/MediaCard/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link MediaCard} under the `'MediaCard'` type key. */
+export declare const MediaCardSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/content/MediaCard/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/content/MediaCard/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,oEAAoE;AACpE,eAAO,MAAM,kBAAkB,EAAE,mBAGhC,CAAC"}

package/dist/components/content/MediaCard/schematic.js

@@ -0,0 +1,7 @@
+import MediaCard from './index';
+/** Registers {@link MediaCard} under the `'MediaCard'` type key. */
+export const MediaCardSchematic = {
+    type: 'MediaCard',
+    Component: MediaCard,
+};
+//# sourceMappingURL=schematic.js.map

package/dist/components/content/MediaCard/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/content/MediaCard/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,SAAS,CAAC;AAEhC,oEAAoE;AACpE,MAAM,CAAC,MAAM,kBAAkB,GAAwB;IACrD,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;CACrB,CAAC"}

package/dist/components/content/MediaCard/types.d.ts

@@ -0,0 +1,12 @@
+import { CardVariant } from '../Card/types';
+/** Photo placements. */
+export declare const MEDIA_CARD_ORIENTATIONS: readonly ["vertical", "horizontal"];
+export type MediaCardOrientation = (typeof MEDIA_CARD_ORIENTATIONS)[number];
+/** Surface treatments (the same set as `Card`). */
+export declare const MEDIA_CARD_VARIANTS: readonly ["elevated", "filled", "outlined"];
+export type MediaCardVariant = CardVariant;
+/** Photo edge of the horizontal layout. */
+export declare const MEDIA_CARD_THUMBNAIL = 96;
+/** Default photo aspect ratio of the vertical layout (16:9). */
+export declare const MEDIA_CARD_ASPECT_RATIO = 1.777;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/content/MediaCard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/content/MediaCard/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,eAAe,CAAC;AAE3D,wBAAwB;AACxB,eAAO,MAAM,uBAAuB,qCAAsC,CAAC;AAC3E,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5E,mDAAmD;AACnD,eAAO,MAAM,mBAAmB,6CAAgB,CAAC;AACjD,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAE3C,2CAA2C;AAC3C,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,gEAAgE;AAChE,eAAO,MAAM,uBAAuB,QAAQ,CAAC"}

package/dist/components/content/MediaCard/types.js

@@ -0,0 +1,10 @@
+import { CARD_VARIANTS } from '../Card/types';
+/** Photo placements. */
+export const MEDIA_CARD_ORIENTATIONS = ['vertical', 'horizontal'];
+/** Surface treatments (the same set as `Card`). */
+export const MEDIA_CARD_VARIANTS = CARD_VARIANTS;
+/** Photo edge of the horizontal layout. */
+export const MEDIA_CARD_THUMBNAIL = 96;
+/** Default photo aspect ratio of the vertical layout (16:9). */
+export const MEDIA_CARD_ASPECT_RATIO = 1.777;
+//# sourceMappingURL=types.js.map

package/dist/components/content/MediaCard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/content/MediaCard/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,eAAe,CAAC;AAE3D,wBAAwB;AACxB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,UAAU,EAAE,YAAY,CAAU,CAAC;AAG3E,mDAAmD;AACnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC;AAGjD,2CAA2C;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,gEAAgE;AAChE,MAAM,CAAC,MAAM,uBAAuB,GAAG,KAAK,CAAC"}

package/dist/components/content/MessageBubble/defaults.d.ts

@@ -0,0 +1,28 @@
+/** Runtime defaults — author slots merge over these. */
+export declare const defaults: {
+    root: {
+        flexDirection: "row";
+        alignItems: "flex-end";
+        alignSelf: "stretch";
+        gap: number;
+    };
+    bubble: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        gap: number;
+    };
+    meta: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "flex-end";
+        gap: number;
+    };
+    status: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    secondCheck: {
+        marginStart: number;
+    };
+};
+//# sourceMappingURL=defaults.d.ts.map

package/dist/components/content/MessageBubble/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/components/content/MessageBubble/defaults.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;CAyBnB,CAAC"}

package/dist/components/content/MessageBubble/defaults.js

@@ -0,0 +1,29 @@
+import { Styler } from '@mapples/style';
+/** Runtime defaults — author slots merge over these. */
+export const defaults = Styler.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        alignSelf: 'stretch',
+        gap: 8,
+    },
+    bubble: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        gap: 2,
+    },
+    meta: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: 4,
+    },
+    status: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    secondCheck: {
+        marginStart: -8,
+    },
+});
+//# sourceMappingURL=defaults.js.map

package/dist/components/content/MessageBubble/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/components/content/MessageBubble/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,wDAAwD;AACxD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC;IACpC,IAAI,EAAE;QACJ,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,SAAS;QACpB,GAAG,EAAE,CAAC;KACP;IACD,MAAM,EAAE;QACN,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,CAAC;QAClB,GAAG,EAAE,CAAC;KACP;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,UAAU;QAC1B,GAAG,EAAE,CAAC;KACP;IACD,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,WAAW,EAAE,CAAC,CAAC;KAChB;CACF,CAAC,CAAC"}

package/dist/components/content/MessageBubble/index.d.ts

@@ -0,0 +1,60 @@
+import { StyledProp } from '@mapples/style';
+import { ImageProps } from 'expo-image';
+import { PressableProps, TextStyle, View, ViewProps, ViewStyle } from 'react-native';
+import { MessageDirection, MessageStatus } from './types';
+/** Props for {@link MessageBubble}. */
+export interface MessageBubbleProps extends Omit<ViewProps, 'children'> {
+    /** The message. */
+    text?: string;
+    /** Received (`incoming`, at the start) or sent (`outgoing`, at the end). Defaults to `incoming`. */
+    direction?: MessageDirection;
+    /** Timestamp shown inside the bubble ('09:41'). */
+    time?: string;
+    /** Delivery state, shown on outgoing messages as one or two checks. */
+    status?: MessageStatus;
+    /** Photo of the sender, shown before incoming bubbles. */
+    avatarSource?: ImageProps['source'];
+    /** Sender name; its initials show before incoming bubbles without a photo. */
+    avatarName?: string;
+    /** Sharpens the bottom corner on the sender's side. Defaults to `true`. */
+    showTail?: boolean;
+    /** Fires when the bubble is pressed. */
+    onPress?: PressableProps['onPress'];
+    /** Fires when the bubble is long-pressed (reactions, copy). */
+    onLongPress?: PressableProps['onLongPress'];
+    /** Styled slots for every visual part. */
+    styled?: {
+        /** The row. */
+        style?: StyledProp<ViewStyle>;
+        /** The bubble. */
+        styleBubble?: StyledProp<ViewStyle>;
+        /** The message text. */
+        styleText?: StyledProp<TextStyle>;
+        /** The time. */
+        styleTime?: StyledProp<TextStyle>;
+        /** The status checks (`color`). */
+        styleStatus?: StyledProp<ViewStyle & {
+            color?: string;
+        }>;
+        /** The sender avatar. */
+        styleAvatar?: StyledProp<ViewStyle>;
+    };
+}
+/**
+ * One chat message. Outgoing bubbles sit at the end in the primary colour
+ * with a delivery status; incoming ones sit at the start on a neutral fill
+ * with an optional sender avatar.
+ *
+ * @example
+ * ```tsx
+ * <MessageBubble text="On my way!" direction="outgoing" time="09:41" status="read" />
+ * <MessageBubble text="See you there." avatarName="Ada Lovelace" time="09:42" />
+ * ```
+ *
+ * @public
+ */
+declare const MessageBubble: import("react").ForwardRefExoticComponent<MessageBubbleProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default MessageBubble;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/content/MessageBubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/content/MessageBubble/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EAGX,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EACL,cAAc,EACd,SAAS,EACT,IAAI,EACJ,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAMtB,OAAO,EAAkB,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE1E,uCAAuC;AACvC,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,mBAAmB;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oGAAoG;IACpG,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IACpC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,+DAA+D;IAC/D,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC5C,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QACP,eAAe;QACf,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9B,kBAAkB;QAClB,WAAW,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACpC,wBAAwB;QACxB,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAClC,gBAAgB;QAChB,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAClC,mCAAmC;QACnC,WAAW,CAAC,EAAE,UAAU,CAAC,SAAS,GAAG;YAAE,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACzD,yBAAyB;QACzB,WAAW,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACrC,CAAC;CACH;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa;;wCAmIlB,CAAC;AAGF,eAAe,aAAa,CAAC"}

package/dist/components/content/MessageBubble/index.js

@@ -0,0 +1,87 @@
+import { forwardRef } from 'react';
+import { StyledPressable, StyledView, Typography, } from '@mapples/style';
+import { Tokens, TYPOGRAPHY_PARTS, useTones } from '@mapples/ui';
+import { Glyph, useSlotColor } from '../../../internal';
+import Avatar from '../Avatar';
+import { defaults } from './defaults';
+import { MESSAGE_BUBBLE } from './types';
+/**
+ * One chat message. Outgoing bubbles sit at the end in the primary colour
+ * with a delivery status; incoming ones sit at the start on a neutral fill
+ * with an optional sender avatar.
+ *
+ * @example
+ * ```tsx
+ * <MessageBubble text="On my way!" direction="outgoing" time="09:41" status="read" />
+ * <MessageBubble text="See you there." avatarName="Ada Lovelace" time="09:42" />
+ * ```
+ *
+ * @public
+ */
+const MessageBubble = forwardRef(({ text, direction = 'incoming', time, status, avatarSource, avatarName, showTail = true, onPress, onLongPress, styled, 
+// The canvas injects a drop area as children; leaf components ignore them.
+children: _children, ...rest }, ref) => {
+    const tones = useTones();
+    const palette = tones.tone('primary');
+    const outgoing = direction === 'outgoing';
+    const pressable = !!onPress || !!onLongPress;
+    const Bubble = pressable ? StyledPressable : StyledView;
+    const textColor = outgoing
+        ? palette.contrast
+        : tones.resolve(Tokens.color.text);
+    const metaColor = outgoing
+        ? palette.contrast
+        : tones.resolve(Tokens.color.textSecondary);
+    const statusColor = useSlotColor(styled?.styleStatus, 'color', metaColor);
+    const showAvatar = !outgoing && (avatarSource !== undefined || !!avatarName);
+    const showStatus = outgoing && !!status;
+    return (<StyledView ref={ref} styled={{
+            style: [
+                defaults.root,
+                { justifyContent: outgoing ? 'flex-end' : 'flex-start' },
+                styled?.style,
+            ],
+        }} {...rest}>
+        {showAvatar ? (<Avatar source={avatarSource} name={avatarName} size="sm" styled={{ style: styled?.styleAvatar }}/>) : null}
+        <Bubble accessibilityRole={pressable ? 'button' : 'text'} accessibilityLabel={text} onPress={onPress} onLongPress={onLongPress} styled={{
+            style: [
+                defaults.bubble,
+                {
+                    maxWidth: MESSAGE_BUBBLE.maxWidth,
+                    borderRadius: MESSAGE_BUBBLE.radius,
+                    backgroundColor: outgoing ? palette.main : tones.fillStrong,
+                },
+                showTail &&
+                    (outgoing
+                        ? { borderBottomEndRadius: MESSAGE_BUBBLE.tailRadius }
+                        : { borderBottomStartRadius: MESSAGE_BUBBLE.tailRadius }),
+                styled?.styleBubble,
+            ],
+        }}>
+          {text ? (<Typography variant={TYPOGRAPHY_PARTS.body} style={[{ color: textColor }, styled?.styleText]}>
+              {text}
+            </Typography>) : null}
+          {time || showStatus ? (<StyledView styled={{ style: defaults.meta }}>
+              {time ? (<Typography variant={TYPOGRAPHY_PARTS.helper} numberOfLines={1} style={[
+                    { color: metaColor, opacity: outgoing ? 0.7 : 1 },
+                    styled?.styleTime,
+                ]}>
+                  {time}
+                </Typography>) : null}
+              {showStatus ? (<StyledView accessibilityLabel={status} styled={{
+                    style: [
+                        defaults.status,
+                        { opacity: status === 'read' ? 1 : 0.7 },
+                        styled?.styleStatus,
+                    ],
+                }}>
+                  <Glyph name="check" size={MESSAGE_BUBBLE.glyph} color={statusColor}/>
+                  {status !== 'sent' ? (<Glyph name="check" size={MESSAGE_BUBBLE.glyph} color={statusColor} style={defaults.secondCheck}/>) : null}
+                </StyledView>) : null}
+            </StyledView>) : null}
+        </Bubble>
+      </StyledView>);
+});
+MessageBubble.displayName = 'MessageBubble';
+export default MessageBubble;
+//# sourceMappingURL=index.js.map

package/dist/components/content/MessageBubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content/MessageBubble/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/content/MessageBubble/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link MessageBubble} under the `'MessageBubble'` type key. */
+export declare const MessageBubbleSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/content/MessageBubble/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/content/MessageBubble/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,4EAA4E;AAC5E,eAAO,MAAM,sBAAsB,EAAE,mBAGpC,CAAC"}

package/dist/components/content/MessageBubble/schematic.js

@@ -0,0 +1,7 @@
+import MessageBubble from './index';
+/** Registers {@link MessageBubble} under the `'MessageBubble'` type key. */
+export const MessageBubbleSchematic = {
+    type: 'MessageBubble',
+    Component: MessageBubble,
+};
+//# sourceMappingURL=schematic.js.map

package/dist/components/content/MessageBubble/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/content/MessageBubble/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,aAAa,MAAM,SAAS,CAAC;AAEpC,4EAA4E;AAC5E,MAAM,CAAC,MAAM,sBAAsB,GAAwB;IACzD,IAAI,EAAE,eAAe;IACrB,SAAS,EAAE,aAAa;CACzB,CAAC"}

package/dist/components/content/MessageBubble/types.d.ts

@@ -0,0 +1,18 @@
+/** Who sent the message. */
+export declare const MESSAGE_DIRECTIONS: readonly ["incoming", "outgoing"];
+export type MessageDirection = (typeof MESSAGE_DIRECTIONS)[number];
+/** Delivery state of an outgoing message. */
+export declare const MESSAGE_STATUSES: readonly ["sent", "delivered", "read"];
+export type MessageStatus = (typeof MESSAGE_STATUSES)[number];
+/** Bubble geometry. */
+export declare const MESSAGE_BUBBLE: {
+    /** Corner radius. */
+    readonly radius: 18;
+    /** Radius of the bottom corner on the sender's side while `showTail`. */
+    readonly tailRadius: 4;
+    /** Widest a bubble grows relative to the row. */
+    readonly maxWidth: "80%";
+    /** Edge of the status check glyphs. */
+    readonly glyph: 14;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/content/MessageBubble/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/content/MessageBubble/types.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,eAAO,MAAM,kBAAkB,mCAAoC,CAAC;AACpE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnE,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,wCAAyC,CAAC;AACvE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,uBAAuB;AACvB,eAAO,MAAM,cAAc;IACzB,qBAAqB;;IAErB,yEAAyE;;IAEzE,iDAAiD;;IAEjD,uCAAuC;;CAE/B,CAAC"}

package/dist/components/content/MessageBubble/types.js

@@ -0,0 +1,16 @@
+/** Who sent the message. */
+export const MESSAGE_DIRECTIONS = ['incoming', 'outgoing'];
+/** Delivery state of an outgoing message. */
+export const MESSAGE_STATUSES = ['sent', 'delivered', 'read'];
+/** Bubble geometry. */
+export const MESSAGE_BUBBLE = {
+    /** Corner radius. */
+    radius: 18,
+    /** Radius of the bottom corner on the sender's side while `showTail`. */
+    tailRadius: 4,
+    /** Widest a bubble grows relative to the row. */
+    maxWidth: '80%',
+    /** Edge of the status check glyphs. */
+    glyph: 14,
+};
+//# sourceMappingURL=types.js.map

package/dist/components/content/MessageBubble/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/content/MessageBubble/types.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,UAAU,EAAE,UAAU,CAAU,CAAC;AAGpE,6CAA6C;AAC7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,CAAU,CAAC;AAGvE,uBAAuB;AACvB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,qBAAqB;IACrB,MAAM,EAAE,EAAE;IACV,yEAAyE;IACzE,UAAU,EAAE,CAAC;IACb,iDAAiD;IACjD,QAAQ,EAAE,KAAK;IACf,uCAAuC;IACvC,KAAK,EAAE,EAAE;CACD,CAAC"}

package/dist/components/content/SectionHeader/index.d.ts

@@ -0,0 +1,46 @@
+import { StyledProp } from '@mapples/style';
+import { Tone } from '@mapples/ui';
+import { TextStyle, View, ViewProps, ViewStyle } from 'react-native';
+import { SectionHeaderVariant } from './types';
+/** Props for {@link SectionHeader}. */
+export interface SectionHeaderProps extends Omit<ViewProps, 'children'> {
+    /** The heading. */
+    title?: string;
+    /** Supporting text under the heading. */
+    subtitle?: string;
+    /** Trailing link label ('See all'); omit to hide it. */
+    actionLabel?: string;
+    /** Fires when the trailing link is pressed. */
+    onActionPress?: () => void;
+    /** Heading style: a subtitle-sized title or a small overline. Defaults to `plain`. */
+    variant?: SectionHeaderVariant;
+    /** Colour role of the action link. Defaults to `primary`. */
+    tone?: Tone;
+    /** Styled slots for every visual part. */
+    styled?: {
+        /** The row. */
+        style?: StyledProp<ViewStyle>;
+        /** The heading. */
+        styleTitle?: StyledProp<TextStyle>;
+        /** The subtitle. */
+        styleSubtitle?: StyledProp<TextStyle>;
+        /** The action link. */
+        styleAction?: StyledProp<TextStyle>;
+    };
+}
+/**
+ * The heading above a rail, list or grid: a title, optional supporting text
+ * and a trailing action link.
+ *
+ * @example
+ * ```tsx
+ * <SectionHeader title="Popular near you" actionLabel="See all" onActionPress={openAll} />
+ * ```
+ *
+ * @public
+ */
+declare const SectionHeader: import("react").ForwardRefExoticComponent<SectionHeaderProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default SectionHeader;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/content/SectionHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/content/SectionHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAU,IAAI,EAA8B,MAAM,aAAa,CAAC;AACvE,OAAO,EAAa,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,uCAAuC;AACvC,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,sFAAsF;IACtF,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QACP,eAAe;QACf,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9B,mBAAmB;QACnB,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACnC,oBAAoB;QACpB,aAAa,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACtC,uBAAuB;QACvB,WAAW,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACrC,CAAC;CACH;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,aAAa;;wCAuFlB,CAAC;AAGF,eAAe,aAAa,CAAC"}

package/dist/components/content/SectionHeader/index.js

@@ -0,0 +1,61 @@
+import { forwardRef } from 'react';
+import { StyledView, Typography } from '@mapples/style';
+import { Tokens, TYPOGRAPHY_PARTS, useTones } from '@mapples/ui';
+import { Pressable } from 'react-native';
+/**
+ * The heading above a rail, list or grid: a title, optional supporting text
+ * and a trailing action link.
+ *
+ * @example
+ * ```tsx
+ * <SectionHeader title="Popular near you" actionLabel="See all" onActionPress={openAll} />
+ * ```
+ *
+ * @public
+ */
+const SectionHeader = forwardRef(({ title, subtitle, actionLabel, onActionPress, variant = 'plain', tone = 'primary', styled, 
+// The canvas injects a drop area as children; leaf components ignore them.
+children: _children, ...rest }, ref) => {
+    const tones = useTones();
+    return (<StyledView ref={ref} styled={{
+            style: [
+                {
+                    alignSelf: 'stretch',
+                    flexDirection: 'row',
+                    alignItems: 'flex-end',
+                    justifyContent: 'space-between',
+                    gap: 12,
+                },
+                styled?.style,
+            ],
+        }} {...rest}>
+        <StyledView styled={{ style: { flex: 1, gap: 2 } }}>
+          {title ? (<Typography variant={variant === 'overline'
+                ? TYPOGRAPHY_PARTS.overline
+                : TYPOGRAPHY_PARTS.title} accessibilityRole="header" style={[
+                {
+                    color: tones.resolve(variant === 'overline'
+                        ? Tokens.color.textSecondary
+                        : Tokens.color.text),
+                },
+                styled?.styleTitle,
+            ]}>
+              {title}
+            </Typography>) : null}
+          {subtitle ? (<Typography variant={TYPOGRAPHY_PARTS.helper} style={[
+                { color: tones.resolve(Tokens.color.textSecondary) },
+                styled?.styleSubtitle,
+            ]}>
+              {subtitle}
+            </Typography>) : null}
+        </StyledView>
+        {actionLabel ? (<Pressable accessibilityRole="link" hitSlop={8} onPress={onActionPress}>
+            <Typography variant={TYPOGRAPHY_PARTS.link} style={[{ color: tones.tone(tone).main }, styled?.styleAction]}>
+              {actionLabel}
+            </Typography>
+          </Pressable>) : null}
+      </StyledView>);
+});
+SectionHeader.displayName = 'SectionHeader';
+export default SectionHeader;
+//# sourceMappingURL=index.js.map

package/dist/components/content/SectionHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content/SectionHeader/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/content/SectionHeader/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link SectionHeader} under the `'SectionHeader'` type key. */
+export declare const SectionHeaderSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/content/SectionHeader/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/content/SectionHeader/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,4EAA4E;AAC5E,eAAO,MAAM,sBAAsB,EAAE,mBAGpC,CAAC"}

package/dist/components/content/SectionHeader/schematic.js

@@ -0,0 +1,7 @@
+import SectionHeader from './index';
+/** Registers {@link SectionHeader} under the `'SectionHeader'` type key. */
+export const SectionHeaderSchematic = {
+    type: 'SectionHeader',
+    Component: SectionHeader,
+};
+//# sourceMappingURL=schematic.js.map

package/dist/components/content/SectionHeader/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/content/SectionHeader/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,aAAa,MAAM,SAAS,CAAC;AAEpC,4EAA4E;AAC5E,MAAM,CAAC,MAAM,sBAAsB,GAAwB;IACzD,IAAI,EAAE,eAAe;IACrB,SAAS,EAAE,aAAa;CACzB,CAAC"}

package/dist/components/content/SectionHeader/types.d.ts

@@ -0,0 +1,4 @@
+/** Heading styles. */
+export declare const SECTION_HEADER_VARIANTS: readonly ["plain", "overline"];
+export type SectionHeaderVariant = (typeof SECTION_HEADER_VARIANTS)[number];
+//# sourceMappingURL=types.d.ts.map