@lmb-it/kitsconcerto-native 0.1.236

package/components/Carousel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Carousel/index.native.tsx"],"sourcesContent":["import React, {useRef, useState} from \"react\";\nimport {View, ScrollView, Image as RNImage, type NativeSyntheticEvent, type NativeScrollEvent} from \"react-native\";\nimport Animated, {useAnimatedStyle, withTiming} from \"react-native-reanimated\";\nimport type {ICarouselProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Text} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n/** Page-dot geometry — kept in sync with the animated indicator's travel. */\nconst DOT = 7;\nconst DOT_GAP = 6;\nconst STEP = DOT + DOT_GAP;\n\n/**\n * Carousel — swipeable paged image viewer with a counter + dots overlay.\n * Native: a paging `ScrollView`; the active page is tracked on momentum end.\n */\nexport function Carousel(rawProps: ICarouselProps) {\n    const props = useComponentDefaults<ICarouselProps>(\"Carousel\", rawProps).mergedProps;\n    const {images, aspectRatio = 1.2, radius = 0, showCounter = true, showDots = true, onIndexChange, testID} = props;\n\n    const [w, setW] = useState(0);\n    const [active, setActive] = useState(0);\n    const scrollRef = useRef<ScrollView>(null);\n    const h = w > 0 ? Math.round(w / aspectRatio) : 0;\n\n    // Active-dot indicator slides between page dots when `active` changes.\n    const indicatorStyle = useAnimatedStyle(() => ({\n        transform: [{translateX: withTiming(active * STEP, {duration: 250})}],\n    }));\n\n    const onMomentumEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n        const vw = e.nativeEvent.layoutMeasurement.width || w || 1;\n        const i = Math.max(0, Math.min(images.length - 1, Math.round(e.nativeEvent.contentOffset.x / vw)));\n        if (i !== active) {\n            setActive(i);\n            onIndexChange?.(i);\n        }\n    };\n\n    return (\n        <View\n            testID={testID}\n            onLayout={e => setW(e.nativeEvent.layout.width)}\n            style={{width: \"100%\", position: \"relative\", borderRadius: radius, overflow: \"hidden\"}}\n        >\n            <ScrollView\n                ref={scrollRef}\n                horizontal\n                pagingEnabled\n                showsHorizontalScrollIndicator={false}\n                onMomentumScrollEnd={onMomentumEnd}\n                scrollEventThrottle={16}\n            >\n                {images.map((src, i) => (\n                    <RNImage key={i} source={{uri: src}} resizeMode=\"cover\" style={{width: w, height: h}} />\n                ))}\n            </ScrollView>\n\n            {showCounter && images.length > 0 && (\n                <Box\n                    position=\"absolute\"\n                    top={8}\n                    right={8}\n                    bgColor=\"rgba(0,0,0,0.55)\"\n                    paddingLeft={8}\n                    paddingRight={8}\n                    paddingTop={2}\n                    paddingBottom={2}\n                    borderRadius={999}\n                >\n                    <Text color=\"#FFFFFF\" fontSize={11} fontWeight=\"700\">\n                        {active + 1} / {images.length}\n                    </Text>\n                </Box>\n            )}\n\n            {showDots && images.length > 1 && (\n                <View style={{position: \"absolute\", bottom: 8, left: 0, right: 0, flexDirection: \"row\", justifyContent: \"center\"}}>\n                    <View style={{position: \"relative\", flexDirection: \"row\", gap: DOT_GAP}}>\n                        {images.map((_, i) => (\n                            <View\n                                key={i}\n                                style={{width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: \"rgba(255,255,255,0.5)\"}}\n                            />\n                        ))}\n                        <Animated.View\n                            style={[\n                                {position: \"absolute\", top: 0, left: 0, width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: \"#FFFFFF\"},\n                                indicatorStyle,\n                            ]}\n                        />\n                    </View>\n                </View>\n            )}\n        </View>\n    );\n}\n\nexport default Carousel;\n"],"names":["useComponentDefaults","useState","useRef","useAnimatedStyle","withTiming","jsxs","View","jsx","ScrollView","RNImage","Box","Text"],"mappings":"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"}

package/components/Carousel/index.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { View, ScrollView, Image } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import Box from '../../primitives/Box/index.js';
+import Text from '../../primitives/Text/index.js';
+import '../../contexts/DialogContext.js';
+import useComponentDefaults from '../../hooks/useComponentDefaults.js';
+
+const DOT = 7;
+const DOT_GAP = 6;
+const STEP = DOT + DOT_GAP;
+function Carousel(rawProps) {
+  const props = useComponentDefaults("Carousel", rawProps).mergedProps;
+  const { images, aspectRatio = 1.2, radius = 0, showCounter = true, showDots = true, onIndexChange, testID } = props;
+  const [w, setW] = useState(0);
+  const [active, setActive] = useState(0);
+  const scrollRef = useRef(null);
+  const h = w > 0 ? Math.round(w / aspectRatio) : 0;
+  const indicatorStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: withTiming(active * STEP, { duration: 250 }) }]
+  }));
+  const onMomentumEnd = (e) => {
+    const vw = e.nativeEvent.layoutMeasurement.width || w || 1;
+    const i = Math.max(0, Math.min(images.length - 1, Math.round(e.nativeEvent.contentOffset.x / vw)));
+    if (i !== active) {
+      setActive(i);
+      onIndexChange?.(i);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      onLayout: (e) => setW(e.nativeEvent.layout.width),
+      style: { width: "100%", position: "relative", borderRadius: radius, overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ref: scrollRef,
+            horizontal: true,
+            pagingEnabled: true,
+            showsHorizontalScrollIndicator: false,
+            onMomentumScrollEnd: onMomentumEnd,
+            scrollEventThrottle: 16,
+            children: images.map((src, i) => /* @__PURE__ */ jsx(Image, { source: { uri: src }, resizeMode: "cover", style: { width: w, height: h } }, i))
+          }
+        ),
+        showCounter && images.length > 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            top: 8,
+            right: 8,
+            bgColor: "rgba(0,0,0,0.55)",
+            paddingLeft: 8,
+            paddingRight: 8,
+            paddingTop: 2,
+            paddingBottom: 2,
+            borderRadius: 999,
+            children: /* @__PURE__ */ jsxs(Text, { color: "#FFFFFF", fontSize: 11, fontWeight: "700", children: [
+              active + 1,
+              " / ",
+              images.length
+            ] })
+          }
+        ),
+        showDots && images.length > 1 && /* @__PURE__ */ jsx(View, { style: { position: "absolute", bottom: 8, left: 0, right: 0, flexDirection: "row", justifyContent: "center" }, children: /* @__PURE__ */ jsxs(View, { style: { position: "relative", flexDirection: "row", gap: DOT_GAP }, children: [
+          images.map((_, i) => /* @__PURE__ */ jsx(
+            View,
+            {
+              style: { width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: "rgba(255,255,255,0.5)" }
+            },
+            i
+          )),
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [
+                { position: "absolute", top: 0, left: 0, width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: "#FFFFFF" },
+                indicatorStyle
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+
+export { Carousel };
+//# sourceMappingURL=index.js.map

package/components/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Carousel/index.native.tsx"],"sourcesContent":["import React, {useRef, useState} from \"react\";\nimport {View, ScrollView, Image as RNImage, type NativeSyntheticEvent, type NativeScrollEvent} from \"react-native\";\nimport Animated, {useAnimatedStyle, withTiming} from \"react-native-reanimated\";\nimport type {ICarouselProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Text} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n/** Page-dot geometry — kept in sync with the animated indicator's travel. */\nconst DOT = 7;\nconst DOT_GAP = 6;\nconst STEP = DOT + DOT_GAP;\n\n/**\n * Carousel — swipeable paged image viewer with a counter + dots overlay.\n * Native: a paging `ScrollView`; the active page is tracked on momentum end.\n */\nexport function Carousel(rawProps: ICarouselProps) {\n    const props = useComponentDefaults<ICarouselProps>(\"Carousel\", rawProps).mergedProps;\n    const {images, aspectRatio = 1.2, radius = 0, showCounter = true, showDots = true, onIndexChange, testID} = props;\n\n    const [w, setW] = useState(0);\n    const [active, setActive] = useState(0);\n    const scrollRef = useRef<ScrollView>(null);\n    const h = w > 0 ? Math.round(w / aspectRatio) : 0;\n\n    // Active-dot indicator slides between page dots when `active` changes.\n    const indicatorStyle = useAnimatedStyle(() => ({\n        transform: [{translateX: withTiming(active * STEP, {duration: 250})}],\n    }));\n\n    const onMomentumEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n        const vw = e.nativeEvent.layoutMeasurement.width || w || 1;\n        const i = Math.max(0, Math.min(images.length - 1, Math.round(e.nativeEvent.contentOffset.x / vw)));\n        if (i !== active) {\n            setActive(i);\n            onIndexChange?.(i);\n        }\n    };\n\n    return (\n        <View\n            testID={testID}\n            onLayout={e => setW(e.nativeEvent.layout.width)}\n            style={{width: \"100%\", position: \"relative\", borderRadius: radius, overflow: \"hidden\"}}\n        >\n            <ScrollView\n                ref={scrollRef}\n                horizontal\n                pagingEnabled\n                showsHorizontalScrollIndicator={false}\n                onMomentumScrollEnd={onMomentumEnd}\n                scrollEventThrottle={16}\n            >\n                {images.map((src, i) => (\n                    <RNImage key={i} source={{uri: src}} resizeMode=\"cover\" style={{width: w, height: h}} />\n                ))}\n            </ScrollView>\n\n            {showCounter && images.length > 0 && (\n                <Box\n                    position=\"absolute\"\n                    top={8}\n                    right={8}\n                    bgColor=\"rgba(0,0,0,0.55)\"\n                    paddingLeft={8}\n                    paddingRight={8}\n                    paddingTop={2}\n                    paddingBottom={2}\n                    borderRadius={999}\n                >\n                    <Text color=\"#FFFFFF\" fontSize={11} fontWeight=\"700\">\n                        {active + 1} / {images.length}\n                    </Text>\n                </Box>\n            )}\n\n            {showDots && images.length > 1 && (\n                <View style={{position: \"absolute\", bottom: 8, left: 0, right: 0, flexDirection: \"row\", justifyContent: \"center\"}}>\n                    <View style={{position: \"relative\", flexDirection: \"row\", gap: DOT_GAP}}>\n                        {images.map((_, i) => (\n                            <View\n                                key={i}\n                                style={{width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: \"rgba(255,255,255,0.5)\"}}\n                            />\n                        ))}\n                        <Animated.View\n                            style={[\n                                {position: \"absolute\", top: 0, left: 0, width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: \"#FFFFFF\"},\n                                indicatorStyle,\n                            ]}\n                        />\n                    </View>\n                </View>\n            )}\n        </View>\n    );\n}\n\nexport default Carousel;\n"],"names":["RNImage"],"mappings":"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"}

package/components/ChatBubble/index.cjs

@@ -0,0 +1,114 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../primitives/Box/index.cjs');
+var index_native$1 = require('../../primitives/Text/index.cjs');
+var index_native = require('../../primitives/Icon/index.cjs');
+require('react');
+require('../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../hooks/useComponentDefaults.cjs');
+var index$1 = require('../MessageReceipt/index.cjs');
+
+const TONE = {
+  neutral: { bg: "surface-muted", text: "text-secondary" },
+  info: { bg: "brand-tint", text: "brand-text" },
+  warning: { bg: "warning-tint", text: "warning-text" },
+  success: { bg: "success-tint", text: "success-text" }
+};
+function ChatBubble(rawProps) {
+  const props = useComponentDefaults.default("ChatBubble", rawProps).mergedProps;
+  const {
+    variant = "incoming",
+    children,
+    text,
+    author,
+    authorColor = "text-secondary",
+    time,
+    tone = "neutral",
+    incomingColor = "gray.100",
+    outgoingColor = "brand",
+    receipt,
+    receiptLabel,
+    footer,
+    bare = false,
+    reply,
+    icon,
+    testID,
+    ...rest
+  } = props;
+  const content = text ?? children;
+  const a11y = testID ? { testID, "data-testid": testID } : {};
+  if (variant === "system") {
+    const t = TONE[tone] ?? TONE.neutral;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      index.default,
+      {
+        alignSelf: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        bgColor: t.bg,
+        borderRadius: 999,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 4,
+        paddingBottom: 4,
+        marginTop: 4,
+        marginBottom: 4,
+        ...rest,
+        ...a11y,
+        children: [
+          icon != null && (typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index_native.Icon, { name: icon, size: 13, color: t.text }) : icon),
+          /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: 11, fontWeight: "600", color: t.text, children: content }),
+          time != null && /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: 10, color: t.text, children: time })
+        ]
+      }
+    );
+  }
+  const outgoing = variant === "outgoing";
+  const bubbleBg = outgoing ? outgoingColor : incomingColor;
+  const fg = outgoing ? "#FFFFFF" : "text";
+  const timeFg = outgoing ? "rgba(255,255,255,0.7)" : "text-secondary";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    index.default,
+    {
+      alignSelf: outgoing ? "flex-end" : "flex-start",
+      maxWidth: "78%",
+      marginTop: 3,
+      marginBottom: 3,
+      ...rest,
+      ...a11y,
+      children: [
+        author != null && !outgoing && /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: 11, fontWeight: "600", color: authorColor, marginLeft: 4, marginBottom: 2, children: author }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          index.default,
+          {
+            bgColor: bubbleBg,
+            paddingLeft: bare ? 0 : 12,
+            paddingRight: bare ? 0 : 12,
+            paddingTop: bare ? 0 : 8,
+            paddingBottom: bare ? 0 : 8,
+            overflow: bare ? "hidden" : void 0,
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            borderBottomLeftRadius: outgoing ? 16 : 4,
+            borderBottomRightRadius: outgoing ? 4 : 16,
+            children: [
+              reply,
+              bare ? content : /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: 14, color: fg, lineHeight: 19, children: content }),
+              time != null && !bare && !(outgoing && (receipt != null || footer != null)) && /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: 10, color: timeFg, alignSelf: "flex-end", marginTop: 2, children: time })
+            ]
+          }
+        ),
+        outgoing && (receipt != null || footer != null) && /* @__PURE__ */ jsxRuntime.jsxs(index.default, { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 4, marginTop: 2, marginRight: 2, children: [
+          time != null && receipt !== "failed" && /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: 10, color: "text-secondary", children: time }),
+          receipt != null && /* @__PURE__ */ jsxRuntime.jsx(index$1.MessageReceipt, { state: receipt, label: receiptLabel, showLabel: receiptLabel != null }),
+          footer
+        ] })
+      ]
+    }
+  );
+}
+
+exports.ChatBubble = ChatBubble;
+//# sourceMappingURL=index.cjs.map

package/components/ChatBubble/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ChatBubble/index.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IChatBubbleProps, ChatBubbleTone} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\nimport {MessageReceipt} from \"../MessageReceipt\";\n\nconst TONE: Record<ChatBubbleTone, {bg: string; text: string}> = {\n    neutral: {bg: \"surface-muted\", text: \"text-secondary\"},\n    info: {bg: \"brand-tint\", text: \"brand-text\"},\n    warning: {bg: \"warning-tint\", text: \"warning-text\"},\n    success: {bg: \"success-tint\", text: \"success-text\"},\n};\n\n/**\n * ChatBubble — a message bubble (incoming / outgoing) or a centered system\n * event pill. Presentational and cross-platform (Box + Text), mirroring the\n * app's chat thread styling.\n *\n *   <ChatBubble variant=\"incoming\" author=\"Sam\" time=\"10:30\">Hi!</ChatBubble>\n *   <ChatBubble variant=\"outgoing\" time=\"10:32\">On my way</ChatBubble>\n *   <ChatBubble variant=\"system\" tone=\"warning\" time=\"10:40\">Leadership transferred</ChatBubble>\n */\nexport function ChatBubble(rawProps: IChatBubbleProps) {\n    const props = useComponentDefaults<IChatBubbleProps>(\"ChatBubble\", rawProps).mergedProps;\n    const {\n        variant = \"incoming\",\n        children,\n        text,\n        author,\n        authorColor = \"text-secondary\",\n        time,\n        tone = \"neutral\",\n        incomingColor = \"gray.100\",\n        outgoingColor = \"brand\",\n        receipt,\n        receiptLabel,\n        footer,\n        bare = false,\n        reply,\n        icon,\n        testID,\n        ...rest\n    } = props;\n\n    const content = text ?? children;\n    const a11y = testID ? ({testID, \"data-testid\": testID} as any) : {};\n\n    if (variant === \"system\") {\n        const t = TONE[tone] ?? TONE.neutral;\n        return (\n            <Box\n                alignSelf=\"center\"\n                flexDirection=\"row\"\n                alignItems=\"center\"\n                gap={6}\n                bgColor={t.bg}\n                borderRadius={999}\n                paddingLeft={10}\n                paddingRight={10}\n                paddingTop={4}\n                paddingBottom={4}\n                marginTop={4}\n                marginBottom={4}\n                {...(rest as any)}\n                {...a11y}\n            >\n                {icon != null && (typeof icon === \"string\"\n                    ? <Icon name={icon} size={13} color={t.text} />\n                    : icon)}\n                <Text fontSize={11} fontWeight=\"600\" color={t.text}>\n                    {content}\n                </Text>\n                {time != null && (\n                    <Text fontSize={10} color={t.text}>\n                        {time}\n                    </Text>\n                )}\n            </Box>\n        );\n    }\n\n    const outgoing = variant === \"outgoing\";\n    const bubbleBg = outgoing ? outgoingColor : incomingColor;\n    const fg = outgoing ? \"#FFFFFF\" : \"text\";\n    const timeFg = outgoing ? \"rgba(255,255,255,0.7)\" : \"text-secondary\";\n\n    return (\n        <Box\n            alignSelf={outgoing ? \"flex-end\" : \"flex-start\"}\n            maxWidth=\"78%\"\n            marginTop={3}\n            marginBottom={3}\n            {...(rest as any)}\n            {...a11y}\n        >\n            {author != null && !outgoing && (\n                <Text fontSize={11} fontWeight=\"600\" color={authorColor} marginLeft={4} marginBottom={2}>\n                    {author}\n                </Text>\n            )}\n            <Box\n                bgColor={bubbleBg}\n                paddingLeft={bare ? 0 : 12}\n                paddingRight={bare ? 0 : 12}\n                paddingTop={bare ? 0 : 8}\n                paddingBottom={bare ? 0 : 8}\n                overflow={bare ? \"hidden\" : undefined}\n                borderTopLeftRadius={16}\n                borderTopRightRadius={16}\n                borderBottomLeftRadius={outgoing ? 16 : 4}\n                borderBottomRightRadius={outgoing ? 4 : 16}\n            >\n                {reply}\n                {bare ? content : (\n                    <Text fontSize={14} color={fg} lineHeight={19}>\n                        {content}\n                    </Text>\n                )}\n                {time != null && !bare && !(outgoing && (receipt != null || footer != null)) && (\n                    <Text fontSize={10} color={timeFg} alignSelf=\"flex-end\" marginTop={2}>\n                        {time}\n                    </Text>\n                )}\n            </Box>\n            {outgoing && (receipt != null || footer != null) && (\n                <Box flexDirection=\"row\" alignItems=\"center\" justifyContent=\"flex-end\" gap={4} marginTop={2} marginRight={2}>\n                    {time != null && receipt !== \"failed\" && (\n                        <Text fontSize={10} color=\"text-secondary\">\n                            {time}\n                        </Text>\n                    )}\n                    {receipt != null && (\n                        <MessageReceipt state={receipt} label={receiptLabel} showLabel={receiptLabel != null} />\n                    )}\n                    {footer}\n                </Box>\n            )}\n        </Box>\n    );\n}\n\nexport default ChatBubble;\n"],"names":["useComponentDefaults","jsxs","Box","jsx","Icon","Text","MessageReceipt"],"mappings":"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"}

package/components/ChatBubble/index.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '../../primitives/Box/index.js';
+import Text from '../../primitives/Text/index.js';
+import { Icon } from '../../primitives/Icon/index.js';
+import 'react';
+import '../../contexts/DialogContext.js';
+import useComponentDefaults from '../../hooks/useComponentDefaults.js';
+import { MessageReceipt } from '../MessageReceipt/index.js';
+
+const TONE = {
+  neutral: { bg: "surface-muted", text: "text-secondary" },
+  info: { bg: "brand-tint", text: "brand-text" },
+  warning: { bg: "warning-tint", text: "warning-text" },
+  success: { bg: "success-tint", text: "success-text" }
+};
+function ChatBubble(rawProps) {
+  const props = useComponentDefaults("ChatBubble", rawProps).mergedProps;
+  const {
+    variant = "incoming",
+    children,
+    text,
+    author,
+    authorColor = "text-secondary",
+    time,
+    tone = "neutral",
+    incomingColor = "gray.100",
+    outgoingColor = "brand",
+    receipt,
+    receiptLabel,
+    footer,
+    bare = false,
+    reply,
+    icon,
+    testID,
+    ...rest
+  } = props;
+  const content = text ?? children;
+  const a11y = testID ? { testID, "data-testid": testID } : {};
+  if (variant === "system") {
+    const t = TONE[tone] ?? TONE.neutral;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        alignSelf: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        bgColor: t.bg,
+        borderRadius: 999,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 4,
+        paddingBottom: 4,
+        marginTop: 4,
+        marginBottom: 4,
+        ...rest,
+        ...a11y,
+        children: [
+          icon != null && (typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 13, color: t.text }) : icon),
+          /* @__PURE__ */ jsx(Text, { fontSize: 11, fontWeight: "600", color: t.text, children: content }),
+          time != null && /* @__PURE__ */ jsx(Text, { fontSize: 10, color: t.text, children: time })
+        ]
+      }
+    );
+  }
+  const outgoing = variant === "outgoing";
+  const bubbleBg = outgoing ? outgoingColor : incomingColor;
+  const fg = outgoing ? "#FFFFFF" : "text";
+  const timeFg = outgoing ? "rgba(255,255,255,0.7)" : "text-secondary";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      alignSelf: outgoing ? "flex-end" : "flex-start",
+      maxWidth: "78%",
+      marginTop: 3,
+      marginBottom: 3,
+      ...rest,
+      ...a11y,
+      children: [
+        author != null && !outgoing && /* @__PURE__ */ jsx(Text, { fontSize: 11, fontWeight: "600", color: authorColor, marginLeft: 4, marginBottom: 2, children: author }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            bgColor: bubbleBg,
+            paddingLeft: bare ? 0 : 12,
+            paddingRight: bare ? 0 : 12,
+            paddingTop: bare ? 0 : 8,
+            paddingBottom: bare ? 0 : 8,
+            overflow: bare ? "hidden" : void 0,
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            borderBottomLeftRadius: outgoing ? 16 : 4,
+            borderBottomRightRadius: outgoing ? 4 : 16,
+            children: [
+              reply,
+              bare ? content : /* @__PURE__ */ jsx(Text, { fontSize: 14, color: fg, lineHeight: 19, children: content }),
+              time != null && !bare && !(outgoing && (receipt != null || footer != null)) && /* @__PURE__ */ jsx(Text, { fontSize: 10, color: timeFg, alignSelf: "flex-end", marginTop: 2, children: time })
+            ]
+          }
+        ),
+        outgoing && (receipt != null || footer != null) && /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 4, marginTop: 2, marginRight: 2, children: [
+          time != null && receipt !== "failed" && /* @__PURE__ */ jsx(Text, { fontSize: 10, color: "text-secondary", children: time }),
+          receipt != null && /* @__PURE__ */ jsx(MessageReceipt, { state: receipt, label: receiptLabel, showLabel: receiptLabel != null }),
+          footer
+        ] })
+      ]
+    }
+  );
+}
+
+export { ChatBubble };
+//# sourceMappingURL=index.js.map

package/components/ChatBubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ChatBubble/index.tsx"],"sourcesContent":["import React from \"react\";\nimport type {IChatBubbleProps, ChatBubbleTone} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\nimport {MessageReceipt} from \"../MessageReceipt\";\n\nconst TONE: Record<ChatBubbleTone, {bg: string; text: string}> = {\n    neutral: {bg: \"surface-muted\", text: \"text-secondary\"},\n    info: {bg: \"brand-tint\", text: \"brand-text\"},\n    warning: {bg: \"warning-tint\", text: \"warning-text\"},\n    success: {bg: \"success-tint\", text: \"success-text\"},\n};\n\n/**\n * ChatBubble — a message bubble (incoming / outgoing) or a centered system\n * event pill. Presentational and cross-platform (Box + Text), mirroring the\n * app's chat thread styling.\n *\n *   <ChatBubble variant=\"incoming\" author=\"Sam\" time=\"10:30\">Hi!</ChatBubble>\n *   <ChatBubble variant=\"outgoing\" time=\"10:32\">On my way</ChatBubble>\n *   <ChatBubble variant=\"system\" tone=\"warning\" time=\"10:40\">Leadership transferred</ChatBubble>\n */\nexport function ChatBubble(rawProps: IChatBubbleProps) {\n    const props = useComponentDefaults<IChatBubbleProps>(\"ChatBubble\", rawProps).mergedProps;\n    const {\n        variant = \"incoming\",\n        children,\n        text,\n        author,\n        authorColor = \"text-secondary\",\n        time,\n        tone = \"neutral\",\n        incomingColor = \"gray.100\",\n        outgoingColor = \"brand\",\n        receipt,\n        receiptLabel,\n        footer,\n        bare = false,\n        reply,\n        icon,\n        testID,\n        ...rest\n    } = props;\n\n    const content = text ?? children;\n    const a11y = testID ? ({testID, \"data-testid\": testID} as any) : {};\n\n    if (variant === \"system\") {\n        const t = TONE[tone] ?? TONE.neutral;\n        return (\n            <Box\n                alignSelf=\"center\"\n                flexDirection=\"row\"\n                alignItems=\"center\"\n                gap={6}\n                bgColor={t.bg}\n                borderRadius={999}\n                paddingLeft={10}\n                paddingRight={10}\n                paddingTop={4}\n                paddingBottom={4}\n                marginTop={4}\n                marginBottom={4}\n                {...(rest as any)}\n                {...a11y}\n            >\n                {icon != null && (typeof icon === \"string\"\n                    ? <Icon name={icon} size={13} color={t.text} />\n                    : icon)}\n                <Text fontSize={11} fontWeight=\"600\" color={t.text}>\n                    {content}\n                </Text>\n                {time != null && (\n                    <Text fontSize={10} color={t.text}>\n                        {time}\n                    </Text>\n                )}\n            </Box>\n        );\n    }\n\n    const outgoing = variant === \"outgoing\";\n    const bubbleBg = outgoing ? outgoingColor : incomingColor;\n    const fg = outgoing ? \"#FFFFFF\" : \"text\";\n    const timeFg = outgoing ? \"rgba(255,255,255,0.7)\" : \"text-secondary\";\n\n    return (\n        <Box\n            alignSelf={outgoing ? \"flex-end\" : \"flex-start\"}\n            maxWidth=\"78%\"\n            marginTop={3}\n            marginBottom={3}\n            {...(rest as any)}\n            {...a11y}\n        >\n            {author != null && !outgoing && (\n                <Text fontSize={11} fontWeight=\"600\" color={authorColor} marginLeft={4} marginBottom={2}>\n                    {author}\n                </Text>\n            )}\n            <Box\n                bgColor={bubbleBg}\n                paddingLeft={bare ? 0 : 12}\n                paddingRight={bare ? 0 : 12}\n                paddingTop={bare ? 0 : 8}\n                paddingBottom={bare ? 0 : 8}\n                overflow={bare ? \"hidden\" : undefined}\n                borderTopLeftRadius={16}\n                borderTopRightRadius={16}\n                borderBottomLeftRadius={outgoing ? 16 : 4}\n                borderBottomRightRadius={outgoing ? 4 : 16}\n            >\n                {reply}\n                {bare ? content : (\n                    <Text fontSize={14} color={fg} lineHeight={19}>\n                        {content}\n                    </Text>\n                )}\n                {time != null && !bare && !(outgoing && (receipt != null || footer != null)) && (\n                    <Text fontSize={10} color={timeFg} alignSelf=\"flex-end\" marginTop={2}>\n                        {time}\n                    </Text>\n                )}\n            </Box>\n            {outgoing && (receipt != null || footer != null) && (\n                <Box flexDirection=\"row\" alignItems=\"center\" justifyContent=\"flex-end\" gap={4} marginTop={2} marginRight={2}>\n                    {time != null && receipt !== \"failed\" && (\n                        <Text fontSize={10} color=\"text-secondary\">\n                            {time}\n                        </Text>\n                    )}\n                    {receipt != null && (\n                        <MessageReceipt state={receipt} label={receiptLabel} showLabel={receiptLabel != null} />\n                    )}\n                    {footer}\n                </Box>\n            )}\n        </Box>\n    );\n}\n\nexport default ChatBubble;\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,IAAA,GAA2D;AAAA,EAC7D,OAAA,EAAS,EAAC,EAAA,EAAI,eAAA,EAAiB,MAAM,gBAAA,EAAgB;AAAA,EACrD,IAAA,EAAM,EAAC,EAAA,EAAI,YAAA,EAAc,MAAM,YAAA,EAAY;AAAA,EAC3C,OAAA,EAAS,EAAC,EAAA,EAAI,cAAA,EAAgB,MAAM,cAAA,EAAc;AAAA,EAClD,OAAA,EAAS,EAAC,EAAA,EAAI,cAAA,EAAgB,MAAM,cAAA;AACxC,CAAA;AAWO,SAAS,WAAW,QAAA,EAA4B;AACnD,EAAA,MAAM,KAAA,GAAQ,oBAAA,CAAuC,YAAA,EAAc,QAAQ,CAAA,CAAE,WAAA;AAC7E,EAAA,MAAM;AAAA,IACF,OAAA,GAAU,UAAA;AAAA,IACV,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA,GAAc,gBAAA;AAAA,IACd,IAAA;AAAA,IACA,IAAA,GAAO,SAAA;AAAA,IACP,aAAA,GAAgB,UAAA;AAAA,IAChB,aAAA,GAAgB,OAAA;AAAA,IAChB,OAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA,GAAO,KAAA;AAAA,IACP,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,KAAA;AAEJ,EAAA,MAAM,UAAU,IAAA,IAAQ,QAAA;AACxB,EAAA,MAAM,OAAO,MAAA,GAAU,EAAC,QAAQ,aAAA,EAAe,MAAA,KAAkB,EAAC;AAElE,EAAA,IAAI,YAAY,QAAA,EAAU;AACtB,IAAA,MAAM,CAAA,GAAI,IAAA,CAAK,IAAI,CAAA,IAAK,IAAA,CAAK,OAAA;AAC7B,IAAA,uBACI,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACG,SAAA,EAAU,QAAA;AAAA,QACV,aAAA,EAAc,KAAA;AAAA,QACd,UAAA,EAAW,QAAA;AAAA,QACX,GAAA,EAAK,CAAA;AAAA,QACL,SAAS,CAAA,CAAE,EAAA;AAAA,QACX,YAAA,EAAc,GAAA;AAAA,QACd,WAAA,EAAa,EAAA;AAAA,QACb,YAAA,EAAc,EAAA;AAAA,QACd,UAAA,EAAY,CAAA;AAAA,QACZ,aAAA,EAAe,CAAA;AAAA,QACf,SAAA,EAAW,CAAA;AAAA,QACX,YAAA,EAAc,CAAA;AAAA,QACb,GAAI,IAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA,IAAQ,IAAA,KAAS,OAAO,IAAA,KAAS,QAAA,mBAC5B,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,EAAA,EAAI,KAAA,EAAO,CAAA,CAAE,MAAM,CAAA,GAC3C,IAAA,CAAA;AAAA,0BACN,GAAA,CAAC,QAAK,QAAA,EAAU,EAAA,EAAI,YAAW,KAAA,EAAM,KAAA,EAAO,CAAA,CAAE,IAAA,EACzC,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,UACC,IAAA,IAAQ,wBACL,GAAA,CAAC,IAAA,EAAA,EAAK,UAAU,EAAA,EAAI,KAAA,EAAO,CAAA,CAAE,IAAA,EACxB,QAAA,EAAA,IAAA,EACL;AAAA;AAAA;AAAA,KAER;AAAA,EAER;AAEA,EAAA,MAAM,WAAW,OAAA,KAAY,UAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,WAAW,aAAA,GAAgB,aAAA;AAC5C,EAAA,MAAM,EAAA,GAAK,WAAW,SAAA,GAAY,MAAA;AAClC,EAAA,MAAM,MAAA,GAAS,WAAW,uBAAA,GAA0B,gBAAA;AAEpD,EAAA,uBACI,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,WAAW,UAAA,GAAa,YAAA;AAAA,MACnC,QAAA,EAAS,KAAA;AAAA,MACT,SAAA,EAAW,CAAA;AAAA,MACX,YAAA,EAAc,CAAA;AAAA,MACb,GAAI,IAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,IAAU,IAAA,IAAQ,CAAC,QAAA,oBAChB,GAAA,CAAC,QAAK,QAAA,EAAU,EAAA,EAAI,UAAA,EAAW,KAAA,EAAM,OAAO,WAAA,EAAa,UAAA,EAAY,CAAA,EAAG,YAAA,EAAc,GACjF,QAAA,EAAA,MAAA,EACL,CAAA;AAAA,wBAEJ,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACG,OAAA,EAAS,QAAA;AAAA,YACT,WAAA,EAAa,OAAO,CAAA,GAAI,EAAA;AAAA,YACxB,YAAA,EAAc,OAAO,CAAA,GAAI,EAAA;AAAA,YACzB,UAAA,EAAY,OAAO,CAAA,GAAI,CAAA;AAAA,YACvB,aAAA,EAAe,OAAO,CAAA,GAAI,CAAA;AAAA,YAC1B,QAAA,EAAU,OAAO,QAAA,GAAW,MAAA;AAAA,YAC5B,mBAAA,EAAqB,EAAA;AAAA,YACrB,oBAAA,EAAsB,EAAA;AAAA,YACtB,sBAAA,EAAwB,WAAW,EAAA,GAAK,CAAA;AAAA,YACxC,uBAAA,EAAyB,WAAW,CAAA,GAAI,EAAA;AAAA,YAEvC,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,IAAA,GAAO,OAAA,mBACJ,GAAA,CAAC,IAAA,EAAA,EAAK,QAAA,EAAU,IAAI,KAAA,EAAO,EAAA,EAAI,UAAA,EAAY,EAAA,EACtC,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,cAEH,IAAA,IAAQ,QAAQ,CAAC,IAAA,IAAQ,EAAE,QAAA,KAAa,OAAA,IAAW,QAAQ,MAAA,IAAU,IAAA,CAAA,CAAA,wBACjE,IAAA,EAAA,EAAK,QAAA,EAAU,IAAI,KAAA,EAAO,MAAA,EAAQ,WAAU,UAAA,EAAW,SAAA,EAAW,GAC9D,QAAA,EAAA,IAAA,EACL;AAAA;AAAA;AAAA,SAER;AAAA,QACC,aAAa,OAAA,IAAW,IAAA,IAAQ,UAAU,IAAA,CAAA,oBACvC,IAAA,CAAC,OAAI,aAAA,EAAc,KAAA,EAAM,UAAA,EAAW,QAAA,EAAS,gBAAe,UAAA,EAAW,GAAA,EAAK,GAAG,SAAA,EAAW,CAAA,EAAG,aAAa,CAAA,EACrG,QAAA,EAAA;AAAA,UAAA,IAAA,IAAQ,IAAA,IAAQ,YAAY,QAAA,oBACzB,GAAA,CAAC,QAAK,QAAA,EAAU,EAAA,EAAI,KAAA,EAAM,gBAAA,EACrB,QAAA,EAAA,IAAA,EACL,CAAA;AAAA,UAEH,OAAA,IAAW,IAAA,oBACR,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,SAAS,KAAA,EAAO,YAAA,EAAc,SAAA,EAAW,YAAA,IAAgB,IAAA,EAAM,CAAA;AAAA,UAEzF;AAAA,SAAA,EACL;AAAA;AAAA;AAAA,GAER;AAER;;;;"}

package/components/Chip/index.cjs

@@ -0,0 +1,159 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactNative = require('react-native');
+var index_native = require('../../assets/Icons/index.cjs');
+var useSeverityColors = require('../../hooks/useSeverityColors.cjs');
+require('../../contexts/DialogContext.cjs');
+var useResolvedStyle = require('../../hooks/useResolvedStyle.cjs');
+
+const SIZE_MAP = {
+  sm: { fontSize: 12, px: 8, py: 4, gap: 6, iconSize: 12, height: 24, removeSize: 12 },
+  md: { fontSize: 14, px: 12, py: 6, gap: 6, iconSize: 14, height: 32, removeSize: 14 },
+  lg: { fontSize: 16, px: 14, py: 8, gap: 8, iconSize: 16, height: 40, removeSize: 16 }
+};
+function resolveIcon(icon, color, iconSize) {
+  if (!icon) return null;
+  if (icon === "dot") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          width: 6,
+          height: 6,
+          borderRadius: 3,
+          backgroundColor: color
+        }
+      }
+    );
+  }
+  if (React.isValidElement(icon)) return icon;
+  if (typeof icon !== "string") return null;
+  const Component = index_native.IconMap[icon];
+  if (Component) return /* @__PURE__ */ jsxRuntime.jsx(Component, { size: iconSize, color });
+  return null;
+}
+function Chip(props) {
+  const {
+    label,
+    children,
+    icon,
+    selected = false,
+    onPress,
+    disabled = false,
+    onRemove,
+    severity = "secondary",
+    size: rawSize,
+    outlined,
+    testID,
+    style
+    // LEGIT-PLATFORM-ONLY (web): className is a CSS class hook with no
+    // native equivalent — use `style` for cross-platform overrides.
+  } = props;
+  const resolvedStyle = useResolvedStyle.default(style || {});
+  const sizeStr = String(rawSize ?? "md");
+  const size = sizeStr === "sm" || sizeStr === "lg" ? sizeStr : "md";
+  const sizeConfig = SIZE_MAP[size];
+  const sevColors = useSeverityColors.useSeverityColors(severity);
+  const visual = React.useMemo(() => {
+    if (selected && !outlined) {
+      return {
+        backgroundColor: sevColors.solid,
+        textColor: sevColors.solidText,
+        borderColor: sevColors.border || sevColors.solid
+      };
+    }
+    if (outlined) {
+      return {
+        backgroundColor: "transparent",
+        textColor: sevColors.solid,
+        borderColor: sevColors.solid
+      };
+    }
+    return {
+      backgroundColor: sevColors.bgTint,
+      textColor: sevColors.text,
+      borderColor: sevColors.border
+    };
+  }, [selected, outlined, sevColors]);
+  const resolvedIcon = resolveIcon(icon, visual.textColor, sizeConfig.iconSize);
+  const content = label ?? children;
+  const isInteractive = !!onPress && !disabled;
+  const containerStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: sizeConfig.gap,
+    height: sizeConfig.height,
+    paddingHorizontal: sizeConfig.px,
+    paddingRight: onRemove ? sizeConfig.gap : sizeConfig.px,
+    borderRadius: 9999,
+    borderWidth: 1,
+    borderStyle: "solid",
+    backgroundColor: visual.backgroundColor,
+    borderColor: visual.borderColor,
+    opacity: disabled ? 0.5 : 1,
+    // Consumer `style` wins last — mirrors web's computedCss merge order.
+    ...resolvedStyle
+  };
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    resolvedIcon,
+    content != null && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        style: {
+          fontSize: sizeConfig.fontSize,
+          fontWeight: "500",
+          color: visual.textColor
+        },
+        numberOfLines: 1,
+        children: content
+      }
+    ),
+    onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Remove",
+        onPress: (e) => {
+          e.stopPropagation?.();
+          if (!disabled) onRemove();
+        },
+        hitSlop: 6,
+        style: {
+          marginLeft: 2,
+          width: sizeConfig.removeSize + 4,
+          height: sizeConfig.removeSize + 4,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: (sizeConfig.removeSize + 4) / 2
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: sizeConfig.removeSize, color: visual.textColor, lineHeight: sizeConfig.removeSize + 2 }, children: "\xD7" })
+      }
+    )
+  ] });
+  if (isInteractive) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        onPress,
+        disabled,
+        accessibilityRole: "button",
+        accessibilityState: { selected, disabled },
+        testID,
+        style: ({ pressed }) => [containerStyle, pressed && styles.pressed],
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, testID, children: inner });
+}
+const styles = reactNative.StyleSheet.create({
+  pressed: {
+    opacity: 0.7
+  }
+});
+
+exports.Chip = Chip;
+//# sourceMappingURL=index.cjs.map

package/components/Chip/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Chip/index.native.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport {Pressable, Text, View, StyleSheet} from \"react-native\";\nimport type {IChipProps, IconName} from \"@lmb-it/kitsconcerto-types\";\nimport {IconMap} from \"../../assets/Icons\";\nimport {useSeverityColors} from \"../../hooks/useSeverityColors\";\nimport {useResolvedStyle} from \"../../hooks\";\n\nconst SIZE_MAP = {\n    sm: {fontSize: 12, px: 8, py: 4, gap: 6, iconSize: 12, height: 24, removeSize: 12},\n    md: {fontSize: 14, px: 12, py: 6, gap: 6, iconSize: 14, height: 32, removeSize: 14},\n    lg: {fontSize: 16, px: 14, py: 8, gap: 8, iconSize: 16, height: 40, removeSize: 16},\n} as const;\n\nfunction resolveIcon(icon: unknown, color: string, iconSize: number): React.ReactNode {\n    if (!icon) return null;\n    if (icon === \"dot\") {\n        return (\n            <View\n                style={{\n                    width: 6,\n                    height: 6,\n                    borderRadius: 3,\n                    backgroundColor: color,\n                }}\n            />\n        );\n    }\n    if (React.isValidElement(icon)) return icon;\n    if (typeof icon !== \"string\") return null;\n    const Component = IconMap[icon as IconName];\n    if (Component) return <Component size={iconSize} color={color}/>;\n    return null;\n}\n\nexport function Chip(props: IChipProps) {\n    const {\n        label,\n        children,\n        icon,\n        selected = false,\n        onPress,\n        disabled = false,\n        onRemove,\n        severity = \"secondary\",\n        size: rawSize,\n        outlined,\n        testID,\n        style,\n        // LEGIT-PLATFORM-ONLY (web): className is a CSS class hook with no\n        // native equivalent — use `style` for cross-platform overrides.\n    } = props;\n    const resolvedStyle = useResolvedStyle(style || {});\n\n    const sizeStr = String(rawSize ?? \"md\");\n    const size: \"sm\" | \"md\" | \"lg\" = sizeStr === \"sm\" || sizeStr === \"lg\" ? sizeStr : \"md\";\n    const sizeConfig = SIZE_MAP[size];\n\n    const sevColors = useSeverityColors(severity as any);\n\n    const visual = useMemo(() => {\n        if (selected && !outlined) {\n            return {\n                backgroundColor: sevColors.solid,\n                textColor: sevColors.solidText,\n                borderColor: sevColors.border || sevColors.solid,\n            };\n        }\n        if (outlined) {\n            return {\n                backgroundColor: \"transparent\",\n                textColor: sevColors.solid,\n                borderColor: sevColors.solid,\n            };\n        }\n        return {\n            backgroundColor: sevColors.bgTint,\n            textColor: sevColors.text,\n            borderColor: sevColors.border,\n        };\n    }, [selected, outlined, sevColors]);\n\n    const resolvedIcon = resolveIcon(icon, visual.textColor, sizeConfig.iconSize);\n    const content = label ?? children;\n    const isInteractive = !!onPress && !disabled;\n\n    const containerStyle = {\n        flexDirection: \"row\" as const,\n        alignItems: \"center\" as const,\n        justifyContent: \"center\" as const,\n        gap: sizeConfig.gap,\n        height: sizeConfig.height,\n        paddingHorizontal: sizeConfig.px,\n        paddingRight: onRemove ? sizeConfig.gap : sizeConfig.px,\n        borderRadius: 9999,\n        borderWidth: 1,\n        borderStyle: \"solid\" as const,\n        backgroundColor: visual.backgroundColor,\n        borderColor: visual.borderColor,\n        opacity: disabled ? 0.5 : 1,\n        // Consumer `style` wins last — mirrors web's computedCss merge order.\n        ...(resolvedStyle as object),\n    };\n\n    const inner = (\n        <>\n            {resolvedIcon}\n            {content != null && (\n                <Text\n                    style={{\n                        fontSize: sizeConfig.fontSize,\n                        fontWeight: \"500\",\n                        color: visual.textColor,\n                    }}\n                    numberOfLines={1}\n                >\n                    {content}\n                </Text>\n            )}\n            {onRemove && (\n                <Pressable\n                    accessibilityRole=\"button\"\n                    accessibilityLabel=\"Remove\"\n                    onPress={(e) => {\n                        e.stopPropagation?.();\n                        if (!disabled) onRemove();\n                    }}\n                    hitSlop={6}\n                    style={{\n                        marginLeft: 2,\n                        width: sizeConfig.removeSize + 4,\n                        height: sizeConfig.removeSize + 4,\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        borderRadius: (sizeConfig.removeSize + 4) / 2,\n                    }}\n                >\n                    <Text style={{fontSize: sizeConfig.removeSize, color: visual.textColor, lineHeight: sizeConfig.removeSize + 2}}>×</Text>\n                </Pressable>\n            )}\n        </>\n    );\n\n    if (isInteractive) {\n        return (\n            <Pressable\n                onPress={onPress}\n                disabled={disabled}\n                accessibilityRole=\"button\"\n                accessibilityState={{selected, disabled}}\n                testID={testID}\n                style={({pressed}) => [containerStyle, pressed && styles.pressed]}\n            >\n                {inner}\n            </Pressable>\n        );\n    }\n\n    return (\n        <View style={containerStyle} testID={testID}>\n            {inner}\n        </View>\n    );\n}\n\nconst styles = StyleSheet.create({\n    pressed: {\n        opacity: 0.7,\n    },\n});\n\nexport default Chip;\n"],"names":["jsx","View","IconMap","useResolvedStyle","useSeverityColors","useMemo","jsxs","Fragment","Text","Pressable","StyleSheet"],"mappings":"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"}