@lmb-it/kitsconcerto-native 0.1.242 → 0.1.244

package/components/BottomTabBar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/BottomTabBar/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {Pressable, Text, View} from \"react-native\";\nimport {useSafeAreaInsets} from \"react-native-safe-area-context\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {IBottomTabBarProps, ITabBarItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Icon} from \"../../primitives\";\nimport {Box} from \"../../primitives\";\nimport Flex from \"../../layout/Flex\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's AMTabBar geometry (App/src/components/shared/layout).\nconst BAR_MIN_HEIGHT = 60;\nconst FAB_SIZE = 56;\n\nfunction Badge({badge, barBg, dangerColor}: {badge: number | boolean; barBg: string; dangerColor: string}) {\n    const isDot = badge === true || badge === 0;\n    if (isDot) {\n        return (\n            <Box\n                style={{\n                    position: \"absolute\",\n                    top: -2,\n                    right: -2,\n                    width: 10,\n                    height: 10,\n                    borderRadius: 5,\n                    backgroundColor: dangerColor,\n                    borderWidth: 1.5,\n                    borderColor: barBg,\n                    zIndex: 10,\n                }}\n            />\n        );\n    }\n    const count = typeof badge === \"number\" ? (badge > 99 ? \"99+\" : String(badge)) : \"\";\n    return (\n        <Box\n            style={{\n                position: \"absolute\",\n                top: -6,\n                right: -10,\n                minWidth: 16,\n                height: 16,\n                borderRadius: 8,\n                paddingHorizontal: 4,\n                backgroundColor: dangerColor,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                borderWidth: 1.5,\n                borderColor: barBg,\n                zIndex: 10,\n            }}\n        >\n            <Text style={{color: \"#FFFFFF\", fontSize: 9, fontWeight: \"700\", lineHeight: 11}}>{count}</Text>\n        </Box>\n    );\n}\n\n/**\n * BottomTabBar — iOS/Android bottom navigation with an elevated center FAB.\n *\n * Layout mirrors the app's working `AMTabBar`: a `row` / `space-between` bar\n * with four `flex:1` **column** slots and a content-width centre slot holding\n * the FAB. The FAB is lifted with `marginTop:-26` and ringed with a 3px\n * border so it sits above the bar plane — never absolutely positioned.\n * Presentational + controlled (router-agnostic).\n */\nexport function BottomTabBar<K extends string = string>(rawProps: IBottomTabBarProps<K>) {\n    const props = useComponentDefaults<IBottomTabBarProps<K>>(\"BottomTabBar\", rawProps).mergedProps;\n    const {\n        items,\n        value,\n        onChange,\n        activeColor = \"brand\",\n        inactiveColor = \"text-secondary\",\n        background = \"surface-card\",\n        fabColor,\n        showLabels = true,\n        testID,\n    } = props;\n\n    const insets = useSafeAreaInsets();\n\n    // Resolve tokens → hex with the standalone resolver (the one `Icon` uses),\n    // so colors apply on raw RN elements in both app and Storybook contexts.\n    const activeC = resolveThemeTokenForNative(activeColor);\n    const inactiveC = resolveThemeTokenForNative(inactiveColor);\n    const bg = resolveThemeTokenForNative(background);\n    const border = resolveThemeTokenForNative(\"surface-border\");\n    const fabBg = resolveThemeTokenForNative(fabColor ?? activeColor);\n    const danger = resolveThemeTokenForNative(\"danger\");\n\n    return (\n        <View\n            testID={testID}\n            style={{\n                width: \"100%\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n                minHeight: BAR_MIN_HEIGHT,\n                paddingHorizontal: 20,\n                paddingTop: 10,\n                paddingBottom: Math.max(insets.bottom, 12),\n                backgroundColor: bg,\n                borderTopWidth: 1,\n                borderTopColor: border,\n            }}\n        >\n            {items.map((item: ITabBarItem<K>) => {\n                const active = item.key === value;\n\n                // Centre FAB — a content-width slot (NOT flex:1) so the four\n                // side slots distribute evenly; the FAB is lifted in-flow.\n                if (item.fab) {\n                    return (\n                        <Flex key={item.key} style={{alignItems: \"center\", justifyContent: \"center\"}}>\n                            <Pressable\n                                onPress={() => onChange(item.key)}\n                                accessibilityRole=\"button\"\n                                accessibilityState={{selected: active}}\n                                hitSlop={8}\n                                style={({pressed}) => [\n                                    {\n                                        width: FAB_SIZE,\n                                        height: FAB_SIZE,\n                                        borderRadius: FAB_SIZE / 2,\n                                        marginTop: -26,\n                                        alignItems: \"center\",\n                                        justifyContent: \"center\",\n                                        backgroundColor: fabBg,\n                                        borderWidth: 3,\n                                        borderColor: bg,\n                                        shadowColor: fabBg,\n                                        shadowOffset: {width: 0, height: 6},\n                                        shadowOpacity: 0.35,\n                                        shadowRadius: 12,\n                                        elevation: 8,\n                                    },\n                                    pressed && {opacity: 0.9},\n                                ]}\n                            >\n                                <Icon name={item.icon as never} size={26} color=\"#FFFFFF\" />\n                            </Pressable>\n                        </Flex>\n                    );\n                }\n\n                const color = active ? activeC : inactiveC;\n                const iconName = active && item.activeIcon != null ? item.activeIcon : item.icon;\n\n                return (\n                    <Pressable\n                        key={item.key}\n                        onPress={() => onChange(item.key)}\n                        accessibilityRole=\"button\"\n                        accessibilityState={{selected: active}}\n                        style={({pressed}) => [\n                            {\n                                flex: 1,\n                                flexDirection: \"column\",\n                                alignItems: \"center\",\n                                justifyContent: \"center\",\n                                gap: 4,\n                                paddingVertical: 6,\n                                paddingHorizontal: 4,\n                                minHeight: 44,\n                            },\n                            pressed && {opacity: 0.7},\n                        ]}\n                    >\n                        <View style={{alignItems: \"center\", justifyContent: \"center\", position: \"relative\"}}>\n                            <Icon name={iconName as never} size={24} color={color} />\n                            {item.badge != null && item.badge !== false && (\n                                <Badge badge={item.badge} barBg={bg} dangerColor={danger} />\n                            )}\n                        </View>\n                        {showLabels && item.label != null && (\n                            <Text numberOfLines={1} style={{fontSize: 11, fontWeight: \"500\", color}}>\n                                {item.label}\n                            </Text>\n                        )}\n                    </Pressable>\n                );\n            })}\n        </View>\n    );\n}\n\nexport default BottomTabBar;\n"],"names":["jsx","Box","Text","useComponentDefaults","useSafeAreaInsets","resolveThemeTokenForNative","View","Flex","Pressable","Icon","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/BottomTabBar/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {Pressable, Text, View} from \"react-native\";\nimport {useSafeAreaInsets} from \"react-native-safe-area-context\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {IBottomTabBarProps, ITabBarItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Icon} from \"../../primitives\";\nimport {Box} from \"../../primitives\";\nimport Flex from \"../../layout/Flex\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's AMTabBar geometry (App/src/components/shared/layout).\nconst BAR_MIN_HEIGHT = 60;\nconst FAB_SIZE = 56;\n\nfunction Badge({badge, barBg, dangerColor}: {badge: number | boolean; barBg: string; dangerColor: string}) {\n    const isDot = badge === true || badge === 0;\n    if (isDot) {\n        return (\n            <Box\n                style={{\n                    position: \"absolute\",\n                    top: -2,\n                    right: -2,\n                    width: 10,\n                    height: 10,\n                    borderRadius: 5,\n                    backgroundColor: dangerColor,\n                    borderWidth: 1.5,\n                    borderColor: barBg,\n                    zIndex: 10,\n                }}\n            />\n        );\n    }\n    const count = typeof badge === \"number\" ? (badge > 99 ? \"99+\" : String(badge)) : \"\";\n    return (\n        <Box\n            style={{\n                position: \"absolute\",\n                top: -6,\n                right: -10,\n                minWidth: 16,\n                height: 16,\n                borderRadius: 8,\n                paddingHorizontal: 4,\n                backgroundColor: dangerColor,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                borderWidth: 1.5,\n                borderColor: barBg,\n                zIndex: 10,\n            }}\n        >\n            <Text style={{color: \"#FFFFFF\", fontSize: 9, fontWeight: \"700\", lineHeight: 11}}>{count}</Text>\n        </Box>\n    );\n}\n\n/**\n * BottomTabBar — iOS/Android bottom navigation with an elevated center FAB.\n *\n * Layout mirrors the app's working `AMTabBar`: a `row` / `space-between` bar\n * with four `flex:1` **column** slots and a content-width centre slot holding\n * the FAB. The FAB is lifted with `marginTop:-26` and ringed with a 3px\n * border so it sits above the bar plane — never absolutely positioned.\n * Presentational + controlled (router-agnostic).\n */\nexport function BottomTabBar<K extends string = string>(rawProps: IBottomTabBarProps<K>) {\n    const props = useComponentDefaults<IBottomTabBarProps<K>>(\"BottomTabBar\", rawProps).mergedProps;\n    const {\n        items,\n        value,\n        onChange,\n        activeColor = \"brand\",\n        inactiveColor = \"text-secondary\",\n        background = \"surface-card\",\n        fabColor,\n        showLabels = true,\n        testID,\n    } = props;\n\n    const insets = useSafeAreaInsets();\n\n    // Resolve tokens → hex with the standalone resolver (the one `Icon` uses),\n    // so colors apply on raw RN elements in both app and Storybook contexts.\n    const activeC = resolveThemeTokenForNative(activeColor);\n    const inactiveC = resolveThemeTokenForNative(inactiveColor);\n    const bg = resolveThemeTokenForNative(background);\n    const border = resolveThemeTokenForNative(\"surface-border\");\n    const fabBg = resolveThemeTokenForNative(fabColor ?? activeColor);\n    const danger = resolveThemeTokenForNative(\"danger\");\n\n    return (\n        <View\n            testID={testID}\n            style={{\n                width: \"100%\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n                minHeight: BAR_MIN_HEIGHT,\n                paddingHorizontal: 20,\n                paddingTop: 10,\n                paddingBottom: Math.max(insets.bottom, 12),\n                backgroundColor: bg,\n                borderTopWidth: 1,\n                borderTopColor: border,\n            }}\n        >\n            {items.map((item: ITabBarItem<K>) => {\n                const active = item.key === value;\n\n                // Centre FAB — a content-width slot (NOT flex:1) so the four\n                // side slots distribute evenly; the FAB is lifted in-flow.\n                if (item.fab) {\n                    return (\n                        <Flex key={item.key} style={{alignItems: \"center\", justifyContent: \"center\"}}>\n                            <Pressable\n                                onPress={() => onChange(item.key)}\n                                accessibilityRole=\"button\"\n                                accessibilityState={{selected: active}}\n                                hitSlop={8}\n                                style={({pressed}) => [\n                                    {\n                                        width: FAB_SIZE,\n                                        height: FAB_SIZE,\n                                        borderRadius: FAB_SIZE / 2,\n                                        marginTop: -26,\n                                        alignItems: \"center\",\n                                        justifyContent: \"center\",\n                                        backgroundColor: fabBg,\n                                        borderWidth: 3,\n                                        borderColor: bg,\n                                        shadowColor: fabBg,\n                                        shadowOffset: {width: 0, height: 6},\n                                        shadowOpacity: 0.35,\n                                        shadowRadius: 12,\n                                        elevation: 8,\n                                    },\n                                    pressed && {opacity: 0.9},\n                                ]}\n                            >\n                                <Icon name={item.icon as never} size={26} color=\"#FFFFFF\" />\n                            </Pressable>\n                        </Flex>\n                    );\n                }\n\n                const color = active ? activeC : inactiveC;\n                const iconName = active && item.activeIcon != null ? item.activeIcon : item.icon;\n\n                return (\n                    <Pressable\n                        key={item.key}\n                        onPress={() => onChange(item.key)}\n                        accessibilityRole=\"button\"\n                        accessibilityState={{selected: active}}\n                        style={({pressed}) => [\n                            {\n                                flex: 1,\n                                flexDirection: \"column\",\n                                alignItems: \"center\",\n                                justifyContent: \"center\",\n                                gap: 4,\n                                paddingVertical: 6,\n                                paddingHorizontal: 4,\n                                minHeight: 44,\n                            },\n                            pressed && {opacity: 0.7},\n                        ]}\n                    >\n                        <View style={{alignItems: \"center\", justifyContent: \"center\", position: \"relative\"}}>\n                            <Icon name={iconName as never} size={24} color={color} />\n                            {item.badge != null && item.badge !== false && (\n                                <Badge badge={item.badge} barBg={bg} dangerColor={danger} />\n                            )}\n                        </View>\n                        {showLabels && item.label != null && (\n                            <Text numberOfLines={1} style={{fontSize: 11, fontWeight: \"500\", color}}>\n                                {item.label}\n                            </Text>\n                        )}\n                    </Pressable>\n                );\n            })}\n        </View>\n    );\n}\n\nexport default BottomTabBar;\n"],"names":["jsx","Box","Text","useComponentDefaults","useSafeAreaInsets","resolveThemeTokenForNative","View","Flex","Pressable","Icon","jsxs"],"mappings":"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"}

package/components/BottomTabBar/index.js

@@ -59,6 +59,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';
 import 'react-i18next';
 import '../../apps/mobile/src/Core/AutoComplete/index.js';

package/components/BottomTabBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/BottomTabBar/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {Pressable, Text, View} from \"react-native\";\nimport {useSafeAreaInsets} from \"react-native-safe-area-context\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {IBottomTabBarProps, ITabBarItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Icon} from \"../../primitives\";\nimport {Box} from \"../../primitives\";\nimport Flex from \"../../layout/Flex\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's AMTabBar geometry (App/src/components/shared/layout).\nconst BAR_MIN_HEIGHT = 60;\nconst FAB_SIZE = 56;\n\nfunction Badge({badge, barBg, dangerColor}: {badge: number | boolean; barBg: string; dangerColor: string}) {\n    const isDot = badge === true || badge === 0;\n    if (isDot) {\n        return (\n            <Box\n                style={{\n                    position: \"absolute\",\n                    top: -2,\n                    right: -2,\n                    width: 10,\n                    height: 10,\n                    borderRadius: 5,\n                    backgroundColor: dangerColor,\n                    borderWidth: 1.5,\n                    borderColor: barBg,\n                    zIndex: 10,\n                }}\n            />\n        );\n    }\n    const count = typeof badge === \"number\" ? (badge > 99 ? \"99+\" : String(badge)) : \"\";\n    return (\n        <Box\n            style={{\n                position: \"absolute\",\n                top: -6,\n                right: -10,\n                minWidth: 16,\n                height: 16,\n                borderRadius: 8,\n                paddingHorizontal: 4,\n                backgroundColor: dangerColor,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                borderWidth: 1.5,\n                borderColor: barBg,\n                zIndex: 10,\n            }}\n        >\n            <Text style={{color: \"#FFFFFF\", fontSize: 9, fontWeight: \"700\", lineHeight: 11}}>{count}</Text>\n        </Box>\n    );\n}\n\n/**\n * BottomTabBar — iOS/Android bottom navigation with an elevated center FAB.\n *\n * Layout mirrors the app's working `AMTabBar`: a `row` / `space-between` bar\n * with four `flex:1` **column** slots and a content-width centre slot holding\n * the FAB. The FAB is lifted with `marginTop:-26` and ringed with a 3px\n * border so it sits above the bar plane — never absolutely positioned.\n * Presentational + controlled (router-agnostic).\n */\nexport function BottomTabBar<K extends string = string>(rawProps: IBottomTabBarProps<K>) {\n    const props = useComponentDefaults<IBottomTabBarProps<K>>(\"BottomTabBar\", rawProps).mergedProps;\n    const {\n        items,\n        value,\n        onChange,\n        activeColor = \"brand\",\n        inactiveColor = \"text-secondary\",\n        background = \"surface-card\",\n        fabColor,\n        showLabels = true,\n        testID,\n    } = props;\n\n    const insets = useSafeAreaInsets();\n\n    // Resolve tokens → hex with the standalone resolver (the one `Icon` uses),\n    // so colors apply on raw RN elements in both app and Storybook contexts.\n    const activeC = resolveThemeTokenForNative(activeColor);\n    const inactiveC = resolveThemeTokenForNative(inactiveColor);\n    const bg = resolveThemeTokenForNative(background);\n    const border = resolveThemeTokenForNative(\"surface-border\");\n    const fabBg = resolveThemeTokenForNative(fabColor ?? activeColor);\n    const danger = resolveThemeTokenForNative(\"danger\");\n\n    return (\n        <View\n            testID={testID}\n            style={{\n                width: \"100%\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n                minHeight: BAR_MIN_HEIGHT,\n                paddingHorizontal: 20,\n                paddingTop: 10,\n                paddingBottom: Math.max(insets.bottom, 12),\n                backgroundColor: bg,\n                borderTopWidth: 1,\n                borderTopColor: border,\n            }}\n        >\n            {items.map((item: ITabBarItem<K>) => {\n                const active = item.key === value;\n\n                // Centre FAB — a content-width slot (NOT flex:1) so the four\n                // side slots distribute evenly; the FAB is lifted in-flow.\n                if (item.fab) {\n                    return (\n                        <Flex key={item.key} style={{alignItems: \"center\", justifyContent: \"center\"}}>\n                            <Pressable\n                                onPress={() => onChange(item.key)}\n                                accessibilityRole=\"button\"\n                                accessibilityState={{selected: active}}\n                                hitSlop={8}\n                                style={({pressed}) => [\n                                    {\n                                        width: FAB_SIZE,\n                                        height: FAB_SIZE,\n                                        borderRadius: FAB_SIZE / 2,\n                                        marginTop: -26,\n                                        alignItems: \"center\",\n                                        justifyContent: \"center\",\n                                        backgroundColor: fabBg,\n                                        borderWidth: 3,\n                                        borderColor: bg,\n                                        shadowColor: fabBg,\n                                        shadowOffset: {width: 0, height: 6},\n                                        shadowOpacity: 0.35,\n                                        shadowRadius: 12,\n                                        elevation: 8,\n                                    },\n                                    pressed && {opacity: 0.9},\n                                ]}\n                            >\n                                <Icon name={item.icon as never} size={26} color=\"#FFFFFF\" />\n                            </Pressable>\n                        </Flex>\n                    );\n                }\n\n                const color = active ? activeC : inactiveC;\n                const iconName = active && item.activeIcon != null ? item.activeIcon : item.icon;\n\n                return (\n                    <Pressable\n                        key={item.key}\n                        onPress={() => onChange(item.key)}\n                        accessibilityRole=\"button\"\n                        accessibilityState={{selected: active}}\n                        style={({pressed}) => [\n                            {\n                                flex: 1,\n                                flexDirection: \"column\",\n                                alignItems: \"center\",\n                                justifyContent: \"center\",\n                                gap: 4,\n                                paddingVertical: 6,\n                                paddingHorizontal: 4,\n                                minHeight: 44,\n                            },\n                            pressed && {opacity: 0.7},\n                        ]}\n                    >\n                        <View style={{alignItems: \"center\", justifyContent: \"center\", position: \"relative\"}}>\n                            <Icon name={iconName as never} size={24} color={color} />\n                            {item.badge != null && item.badge !== false && (\n                                <Badge badge={item.badge} barBg={bg} dangerColor={danger} />\n                            )}\n                        </View>\n                        {showLabels && item.label != null && (\n                            <Text numberOfLines={1} style={{fontSize: 11, fontWeight: \"500\", color}}>\n                                {item.label}\n                            </Text>\n                        )}\n                    </Pressable>\n                );\n            })}\n        </View>\n    );\n}\n\nexport default BottomTabBar;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/BottomTabBar/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {Pressable, Text, View} from \"react-native\";\nimport {useSafeAreaInsets} from \"react-native-safe-area-context\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {IBottomTabBarProps, ITabBarItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Icon} from \"../../primitives\";\nimport {Box} from \"../../primitives\";\nimport Flex from \"../../layout/Flex\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's AMTabBar geometry (App/src/components/shared/layout).\nconst BAR_MIN_HEIGHT = 60;\nconst FAB_SIZE = 56;\n\nfunction Badge({badge, barBg, dangerColor}: {badge: number | boolean; barBg: string; dangerColor: string}) {\n    const isDot = badge === true || badge === 0;\n    if (isDot) {\n        return (\n            <Box\n                style={{\n                    position: \"absolute\",\n                    top: -2,\n                    right: -2,\n                    width: 10,\n                    height: 10,\n                    borderRadius: 5,\n                    backgroundColor: dangerColor,\n                    borderWidth: 1.5,\n                    borderColor: barBg,\n                    zIndex: 10,\n                }}\n            />\n        );\n    }\n    const count = typeof badge === \"number\" ? (badge > 99 ? \"99+\" : String(badge)) : \"\";\n    return (\n        <Box\n            style={{\n                position: \"absolute\",\n                top: -6,\n                right: -10,\n                minWidth: 16,\n                height: 16,\n                borderRadius: 8,\n                paddingHorizontal: 4,\n                backgroundColor: dangerColor,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                borderWidth: 1.5,\n                borderColor: barBg,\n                zIndex: 10,\n            }}\n        >\n            <Text style={{color: \"#FFFFFF\", fontSize: 9, fontWeight: \"700\", lineHeight: 11}}>{count}</Text>\n        </Box>\n    );\n}\n\n/**\n * BottomTabBar — iOS/Android bottom navigation with an elevated center FAB.\n *\n * Layout mirrors the app's working `AMTabBar`: a `row` / `space-between` bar\n * with four `flex:1` **column** slots and a content-width centre slot holding\n * the FAB. The FAB is lifted with `marginTop:-26` and ringed with a 3px\n * border so it sits above the bar plane — never absolutely positioned.\n * Presentational + controlled (router-agnostic).\n */\nexport function BottomTabBar<K extends string = string>(rawProps: IBottomTabBarProps<K>) {\n    const props = useComponentDefaults<IBottomTabBarProps<K>>(\"BottomTabBar\", rawProps).mergedProps;\n    const {\n        items,\n        value,\n        onChange,\n        activeColor = \"brand\",\n        inactiveColor = \"text-secondary\",\n        background = \"surface-card\",\n        fabColor,\n        showLabels = true,\n        testID,\n    } = props;\n\n    const insets = useSafeAreaInsets();\n\n    // Resolve tokens → hex with the standalone resolver (the one `Icon` uses),\n    // so colors apply on raw RN elements in both app and Storybook contexts.\n    const activeC = resolveThemeTokenForNative(activeColor);\n    const inactiveC = resolveThemeTokenForNative(inactiveColor);\n    const bg = resolveThemeTokenForNative(background);\n    const border = resolveThemeTokenForNative(\"surface-border\");\n    const fabBg = resolveThemeTokenForNative(fabColor ?? activeColor);\n    const danger = resolveThemeTokenForNative(\"danger\");\n\n    return (\n        <View\n            testID={testID}\n            style={{\n                width: \"100%\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n                minHeight: BAR_MIN_HEIGHT,\n                paddingHorizontal: 20,\n                paddingTop: 10,\n                paddingBottom: Math.max(insets.bottom, 12),\n                backgroundColor: bg,\n                borderTopWidth: 1,\n                borderTopColor: border,\n            }}\n        >\n            {items.map((item: ITabBarItem<K>) => {\n                const active = item.key === value;\n\n                // Centre FAB — a content-width slot (NOT flex:1) so the four\n                // side slots distribute evenly; the FAB is lifted in-flow.\n                if (item.fab) {\n                    return (\n                        <Flex key={item.key} style={{alignItems: \"center\", justifyContent: \"center\"}}>\n                            <Pressable\n                                onPress={() => onChange(item.key)}\n                                accessibilityRole=\"button\"\n                                accessibilityState={{selected: active}}\n                                hitSlop={8}\n                                style={({pressed}) => [\n                                    {\n                                        width: FAB_SIZE,\n                                        height: FAB_SIZE,\n                                        borderRadius: FAB_SIZE / 2,\n                                        marginTop: -26,\n                                        alignItems: \"center\",\n                                        justifyContent: \"center\",\n                                        backgroundColor: fabBg,\n                                        borderWidth: 3,\n                                        borderColor: bg,\n                                        shadowColor: fabBg,\n                                        shadowOffset: {width: 0, height: 6},\n                                        shadowOpacity: 0.35,\n                                        shadowRadius: 12,\n                                        elevation: 8,\n                                    },\n                                    pressed && {opacity: 0.9},\n                                ]}\n                            >\n                                <Icon name={item.icon as never} size={26} color=\"#FFFFFF\" />\n                            </Pressable>\n                        </Flex>\n                    );\n                }\n\n                const color = active ? activeC : inactiveC;\n                const iconName = active && item.activeIcon != null ? item.activeIcon : item.icon;\n\n                return (\n                    <Pressable\n                        key={item.key}\n                        onPress={() => onChange(item.key)}\n                        accessibilityRole=\"button\"\n                        accessibilityState={{selected: active}}\n                        style={({pressed}) => [\n                            {\n                                flex: 1,\n                                flexDirection: \"column\",\n                                alignItems: \"center\",\n                                justifyContent: \"center\",\n                                gap: 4,\n                                paddingVertical: 6,\n                                paddingHorizontal: 4,\n                                minHeight: 44,\n                            },\n                            pressed && {opacity: 0.7},\n                        ]}\n                    >\n                        <View style={{alignItems: \"center\", justifyContent: \"center\", position: \"relative\"}}>\n                            <Icon name={iconName as never} size={24} color={color} />\n                            {item.badge != null && item.badge !== false && (\n                                <Badge badge={item.badge} barBg={bg} dangerColor={danger} />\n                            )}\n                        </View>\n                        {showLabels && item.label != null && (\n                            <Text numberOfLines={1} style={{fontSize: 11, fontWeight: \"500\", color}}>\n                                {item.label}\n                            </Text>\n                        )}\n                    </Pressable>\n                );\n            })}\n        </View>\n    );\n}\n\nexport default BottomTabBar;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,cAAA,GAAiB,EAAA;AACvB,MAAM,QAAA,GAAW,EAAA;AAEjB,SAAS,KAAA,CAAM,EAAC,KAAA,EAAO,KAAA,EAAO,aAAW,EAAkE;AACvG,EAAA,MAAM,KAAA,GAAQ,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,CAAA;AAC1C,EAAA,IAAI,KAAA,EAAO;AACP,IAAA,uBACI,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACG,KAAA,EAAO;AAAA,UACH,QAAA,EAAU,UAAA;AAAA,UACV,GAAA,EAAK,EAAA;AAAA,UACL,KAAA,EAAO,EAAA;AAAA,UACP,KAAA,EAAO,EAAA;AAAA,UACP,MAAA,EAAQ,EAAA;AAAA,UACR,YAAA,EAAc,CAAA;AAAA,UACd,eAAA,EAAiB,WAAA;AAAA,UACjB,WAAA,EAAa,GAAA;AAAA,UACb,WAAA,EAAa,KAAA;AAAA,UACb,MAAA,EAAQ;AAAA;AACZ;AAAA,KACJ;AAAA,EAER;AACA,EAAA,MAAM,KAAA,GAAQ,OAAO,KAAA,KAAU,QAAA,GAAY,QAAQ,EAAA,GAAK,KAAA,GAAQ,MAAA,CAAO,KAAK,CAAA,GAAK,EAAA;AACjF,EAAA,uBACI,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACG,KAAA,EAAO;AAAA,QACH,QAAA,EAAU,UAAA;AAAA,QACV,GAAA,EAAK,EAAA;AAAA,QACL,KAAA,EAAO,GAAA;AAAA,QACP,QAAA,EAAU,EAAA;AAAA,QACV,MAAA,EAAQ,EAAA;AAAA,QACR,YAAA,EAAc,CAAA;AAAA,QACd,iBAAA,EAAmB,CAAA;AAAA,QACnB,eAAA,EAAiB,WAAA;AAAA,QACjB,UAAA,EAAY,QAAA;AAAA,QACZ,cAAA,EAAgB,QAAA;AAAA,QAChB,WAAA,EAAa,GAAA;AAAA,QACb,WAAA,EAAa,KAAA;AAAA,QACb,MAAA,EAAQ;AAAA,OACZ;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAO,EAAC,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,CAAA,EAAG,UAAA,EAAY,KAAA,EAAO,UAAA,EAAY,EAAA,IAAM,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA,GAC5F;AAER;AAWO,SAAS,aAAwC,QAAA,EAAiC;AACrF,EAAA,MAAM,KAAA,GAAQ,oBAAA,CAA4C,cAAA,EAAgB,QAAQ,CAAA,CAAE,WAAA;AACpF,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,GAAc,OAAA;AAAA,IACd,aAAA,GAAgB,gBAAA;AAAA,IAChB,UAAA,GAAa,cAAA;AAAA,IACb,QAAA;AAAA,IACA,UAAA,GAAa,IAAA;AAAA,IACb;AAAA,GACJ,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAS,iBAAA,EAAkB;AAIjC,EAAA,MAAM,OAAA,GAAU,2BAA2B,WAAW,CAAA;AACtD,EAAA,MAAM,SAAA,GAAY,2BAA2B,aAAa,CAAA;AAC1D,EAAA,MAAM,EAAA,GAAK,2BAA2B,UAAU,CAAA;AAChD,EAAA,MAAM,MAAA,GAAS,2BAA2B,gBAAgB,CAAA;AAC1D,EAAA,MAAM,KAAA,GAAQ,0BAAA,CAA2B,QAAA,IAAY,WAAW,CAAA;AAChE,EAAA,MAAM,MAAA,GAAS,2BAA2B,QAAQ,CAAA;AAElD,EAAA,uBACI,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACG,MAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACH,KAAA,EAAO,MAAA;AAAA,QACP,aAAA,EAAe,KAAA;AAAA,QACf,UAAA,EAAY,QAAA;AAAA,QACZ,cAAA,EAAgB,eAAA;AAAA,QAChB,SAAA,EAAW,cAAA;AAAA,QACX,iBAAA,EAAmB,EAAA;AAAA,QACnB,UAAA,EAAY,EAAA;AAAA,QACZ,aAAA,EAAe,IAAA,CAAK,GAAA,CAAI,MAAA,CAAO,QAAQ,EAAE,CAAA;AAAA,QACzC,eAAA,EAAiB,EAAA;AAAA,QACjB,cAAA,EAAgB,CAAA;AAAA,QAChB,cAAA,EAAgB;AAAA,OACpB;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAyB;AACjC,QAAA,MAAM,MAAA,GAAS,KAAK,GAAA,KAAQ,KAAA;AAI5B,QAAA,IAAI,KAAK,GAAA,EAAK;AACV,UAAA,uBACI,GAAA,CAAC,QAAoB,KAAA,EAAO,EAAC,YAAY,QAAA,EAAU,cAAA,EAAgB,UAAQ,EACvE,QAAA,kBAAA,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACG,OAAA,EAAS,MAAM,QAAA,CAAS,IAAA,CAAK,GAAG,CAAA;AAAA,cAChC,iBAAA,EAAkB,QAAA;AAAA,cAClB,kBAAA,EAAoB,EAAC,QAAA,EAAU,MAAA,EAAM;AAAA,cACrC,OAAA,EAAS,CAAA;AAAA,cACT,KAAA,EAAO,CAAC,EAAC,OAAA,EAAO,KAAM;AAAA,gBAClB;AAAA,kBACI,KAAA,EAAO,QAAA;AAAA,kBACP,MAAA,EAAQ,QAAA;AAAA,kBACR,cAAc,QAAA,GAAW,CAAA;AAAA,kBACzB,SAAA,EAAW,GAAA;AAAA,kBACX,UAAA,EAAY,QAAA;AAAA,kBACZ,cAAA,EAAgB,QAAA;AAAA,kBAChB,eAAA,EAAiB,KAAA;AAAA,kBACjB,WAAA,EAAa,CAAA;AAAA,kBACb,WAAA,EAAa,EAAA;AAAA,kBACb,WAAA,EAAa,KAAA;AAAA,kBACb,YAAA,EAAc,EAAC,KAAA,EAAO,CAAA,EAAG,QAAQ,CAAA,EAAC;AAAA,kBAClC,aAAA,EAAe,IAAA;AAAA,kBACf,YAAA,EAAc,EAAA;AAAA,kBACd,SAAA,EAAW;AAAA,iBACf;AAAA,gBACA,OAAA,IAAW,EAAC,OAAA,EAAS,GAAA;AAAG,eAC5B;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAA,EAAM,IAAA,CAAK,MAAe,IAAA,EAAM,EAAA,EAAI,OAAM,SAAA,EAAU;AAAA;AAAA,WAC9D,EAAA,EA3BO,KAAK,GA4BhB,CAAA;AAAA,QAER;AAEA,QAAA,MAAM,KAAA,GAAQ,SAAS,OAAA,GAAU,SAAA;AACjC,QAAA,MAAM,WAAW,MAAA,IAAU,IAAA,CAAK,cAAc,IAAA,GAAO,IAAA,CAAK,aAAa,IAAA,CAAK,IAAA;AAE5E,QAAA,uBACI,IAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YAEG,OAAA,EAAS,MAAM,QAAA,CAAS,IAAA,CAAK,GAAG,CAAA;AAAA,YAChC,iBAAA,EAAkB,QAAA;AAAA,YAClB,kBAAA,EAAoB,EAAC,QAAA,EAAU,MAAA,EAAM;AAAA,YACrC,KAAA,EAAO,CAAC,EAAC,OAAA,EAAO,KAAM;AAAA,cAClB;AAAA,gBACI,IAAA,EAAM,CAAA;AAAA,gBACN,aAAA,EAAe,QAAA;AAAA,gBACf,UAAA,EAAY,QAAA;AAAA,gBACZ,cAAA,EAAgB,QAAA;AAAA,gBAChB,GAAA,EAAK,CAAA;AAAA,gBACL,eAAA,EAAiB,CAAA;AAAA,gBACjB,iBAAA,EAAmB,CAAA;AAAA,gBACnB,SAAA,EAAW;AAAA,eACf;AAAA,cACA,OAAA,IAAW,EAAC,OAAA,EAAS,GAAA;AAAG,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,IAAA,EAAA,EAAK,OAAO,EAAC,UAAA,EAAY,UAAU,cAAA,EAAgB,QAAA,EAAU,QAAA,EAAU,UAAA,EAAU,EAC9E,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,QAAA,EAAmB,IAAA,EAAM,IAAI,KAAA,EAAc,CAAA;AAAA,gBACtD,IAAA,CAAK,KAAA,IAAS,IAAA,IAAQ,IAAA,CAAK,UAAU,KAAA,oBAClC,GAAA,CAAC,KAAA,EAAA,EAAM,KAAA,EAAO,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,EAAA,EAAI,aAAa,MAAA,EAAQ;AAAA,eAAA,EAElE,CAAA;AAAA,cACC,cAAc,IAAA,CAAK,KAAA,IAAS,IAAA,oBACzB,GAAA,CAAC,QAAK,aAAA,EAAe,CAAA,EAAG,KAAA,EAAO,EAAC,UAAU,EAAA,EAAI,UAAA,EAAY,OAAO,KAAA,EAAK,EACjE,eAAK,KAAA,EACV;AAAA;AAAA,WAAA;AAAA,UA3BC,IAAA,CAAK;AAAA,SA6Bd;AAAA,MAER,CAAC;AAAA;AAAA,GACL;AAER;;;;"}

package/components/Button/Button.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 var useSeparator = require('../../apps/mobile/src/Factory/useSeparator.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');

package/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.native.tsx"],"sourcesContent":["import React, {useMemo, useCallback, type ElementType, type ReactElement} from 'react';\nimport {\n    ActivityIndicator,\n    Text as RNText,\n    type TextStyle,\n    type GestureResponderEvent,\n} from 'react-native';\nimport type {IButtonProps, IconName, IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {ResponsiveElement, useSeparator, style as resolveStyle} from '@lmb-it/kitsconcertomobile';\nimport {IconMap} from '../../assets/Icons';\nimport {useLanguage, useComponentDefaults, useThemedFont} from '../../hooks';\nimport {useSeverityColors} from '../../hooks/useSeverityColors';\n\n/* ─── Size configuration (matches web) ────────────────────────── */\nconst SIZE_MAP = {\n    sm: {height: 32, fontSize: 12, px: 10, py: 6, gap: 6, iconSize: 14},\n    md: {height: 40, fontSize: 14, px: 16, py: 10, gap: 8, iconSize: 16},\n    lg: {height: 48, fontSize: 16, px: 24, py: 12, gap: 10, iconSize: 18},\n} as const;\n\n/* ─── Icon resolver ──────────────────────────────────────────── */\nfunction resolveIcon(\n    icon: unknown,\n    color: string,\n    iconSize: number,\n): React.ReactNode {\n    if (!icon) return null;\n    if (React.isValidElement(icon)) {\n        return React.cloneElement(icon as ReactElement<any>, {color, size: iconSize});\n    }\n    if (typeof icon === 'function') {\n        const Comp = icon as ElementType;\n        return <Comp size={iconSize} color={color} />;\n    }\n    if (typeof icon !== 'string') return null;\n    const piMatches = icon.match(/pi-([a-z-]+)/g);\n    const iconName = piMatches\n        ? (piMatches[piMatches.length - 1]!.replace('pi-', '') as IconName)\n        : (icon as IconName);\n    const Component = IconMap[iconName];\n    if (Component) return <Component size={iconSize} color={color} />;\n    return null;\n}\n\n/* ─── Button Component ───────────────────────────────────────── */\nexport function Button(rawProps: IButtonProps<IconName | string | ElementType | ReactElement>) {\n    const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('Button', rawProps);\n    const {\n        children,\n        label,\n        isLoadingText,\n        severity = 'brand',\n        size = 'md',\n        loading,\n        iconPos = 'left',\n        icon,\n        disabled,\n        outlined,\n        raised,\n        rounded,\n        testID,\n        style: styleProp,\n        onPress,\n        onClick,\n        ...rest\n    } = props;\n\n    const {t} = useLanguage();\n    const labelFont = useThemedFont('body');\n    const {cssProps, nativeProps} = useSeparator<Record<any, any>>(rest);\n    const sevColors = useSeverityColors((severity as any) ?? 'brand');\n\n    const sizeConfig = SIZE_MAP[size as keyof typeof SIZE_MAP] ?? SIZE_MAP.md;\n    const isDisabled = disabled || loading;\n\n    /* ── Resolve label text ── */\n    const resolvedLabel = typeof children === 'string'\n        ? children\n        : loading && isLoadingText\n            ? isLoadingText\n            : label ? t(label) : '';\n\n    const hasLabel = !!resolvedLabel;\n    const isIconOnly = !hasLabel && !!icon;\n\n    /* ── Severity colors ── */\n    const textColor = outlined ? sevColors.solid : sevColors.solidText;\n    const bgColor = outlined ? 'transparent' : sevColors.solid;\n    const borderColor = sevColors.border || sevColors.solid;\n\n    /* ── Build CSS props for ResponsiveElement ── */\n    const computedCss:IStyleClasses = useMemo(() => ({\n        backgroundColor: bgColor,\n        borderColor,\n        borderWidth: 1,\n        height: sizeConfig.height,\n        paddingLeft: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingRight: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingTop: sizeConfig.py,\n        paddingBottom: sizeConfig.py,\n        borderRadius: rounded ? 9999 : 6,\n        flexDirection: iconPos === 'top' || iconPos === 'bottom'\n            ? (iconPos === 'bottom' ? 'column-reverse' : 'column')\n            : (iconPos === 'right' ? 'row-reverse' : 'row'),\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: sizeConfig.gap,\n        opacity: isDisabled ? 50 : 100,\n        alignSelf: 'flex-start',\n        overflow: 'hidden',\n        ...(raised ? {\n            shadowColor: '#000',\n            shadowOffset: {width: 0, height: 3},\n            shadowOpacity: 0.16,\n            shadowRadius: 6,\n            elevation: 4,\n        } : {}),\n        // Theme overrides the defaults above: shared `root` first, then the\n        // `text` slot (label buttons) or the `iconOnly` slot. Icon-only buttons\n        // are forced square so a `root`/`text` height can never stretch them —\n        // the `iconOnly` slot can still override the square if needed.\n        ...themeStyle,\n        ...(elementStyles.root || {}),\n        ...(isIconOnly\n            ? {\n                width: sizeConfig.height,\n                height: sizeConfig.height,\n                minWidth: sizeConfig.height,\n                ...(elementStyles.iconOnly || {}),\n              }\n            : (elementStyles.text || {})),\n        ...cssProps,\n        ...styleProp,\n    }), [themeStyle, elementStyles, cssProps, bgColor, borderColor, sizeConfig,\n        hasLabel, icon, iconPos, rounded, raised, isDisabled, styleProp, isIconOnly]);\n\n    /* ── Icon element ── */\n    const iconElement = loading\n        ? <ActivityIndicator size=\"small\" color={textColor} />\n        : resolveIcon(icon, textColor, sizeConfig.iconSize);\n\n    /* ── Text style ── */\n    const labelStyle: TextStyle = useMemo(() => ({\n        color: textColor,\n        fontSize: sizeConfig.fontSize,\n        fontWeight: '600',\n        lineHeight: sizeConfig.fontSize * 1.2,\n        ...(labelFont ? {fontFamily: labelFont} : {}),\n        // Theme/per-instance label slot wins — e.g. theme.components.Button.label.style\n        // = { lineHeight: 22 } to stop Arabic (NotoKufiArabic) glyphs clipping.\n        ...((elementStyles.label as TextStyle) || {}),\n    }), [textColor, sizeConfig, labelFont, elementStyles.label]);\n\n    /* ── Press handler ── */\n    const handlePress = useCallback((e: GestureResponderEvent) => {\n        if (isDisabled) return;\n        if (onPress) onPress(e as any);\n        if (onClick) onClick(e as any);\n    }, [isDisabled, onPress, onClick]);\n\n    return (\n        <ResponsiveElement\n            as=\"Pressable\"\n            cssProps={computedCss}\n            nativeProps={{\n                ...nativeProps,\n                onPress: handlePress,\n                disabled: isDisabled,\n                testID,\n                accessibilityRole: 'button',\n                accessibilityState: {disabled: isDisabled, busy: loading},\n                accessibilityLabel: resolvedLabel || undefined,\n            }}\n        >\n            {iconElement}\n            {!!hasLabel && (\n                <RNText style={labelStyle} numberOfLines={1}>\n                    {resolvedLabel}\n                </RNText>\n            )}\n            {typeof children !== 'string' ? children : undefined}\n        </ResponsiveElement>\n    );\n}\n\nexport default Button;\n"],"names":["jsx","IconMap","useComponentDefaults","useLanguage","useThemedFont","useSeparator","useSeverityColors","useMemo","ActivityIndicator","useCallback","jsxs","ResponsiveElement","RNText"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.native.tsx"],"sourcesContent":["import React, {useMemo, useCallback, type ElementType, type ReactElement} from 'react';\nimport {\n    ActivityIndicator,\n    Text as RNText,\n    type TextStyle,\n    type GestureResponderEvent,\n} from 'react-native';\nimport type {IButtonProps, IconName, IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {ResponsiveElement, useSeparator, style as resolveStyle} from '@lmb-it/kitsconcertomobile';\nimport {IconMap} from '../../assets/Icons';\nimport {useLanguage, useComponentDefaults, useThemedFont} from '../../hooks';\nimport {useSeverityColors} from '../../hooks/useSeverityColors';\n\n/* ─── Size configuration (matches web) ────────────────────────── */\nconst SIZE_MAP = {\n    sm: {height: 32, fontSize: 12, px: 10, py: 6, gap: 6, iconSize: 14},\n    md: {height: 40, fontSize: 14, px: 16, py: 10, gap: 8, iconSize: 16},\n    lg: {height: 48, fontSize: 16, px: 24, py: 12, gap: 10, iconSize: 18},\n} as const;\n\n/* ─── Icon resolver ──────────────────────────────────────────── */\nfunction resolveIcon(\n    icon: unknown,\n    color: string,\n    iconSize: number,\n): React.ReactNode {\n    if (!icon) return null;\n    if (React.isValidElement(icon)) {\n        return React.cloneElement(icon as ReactElement<any>, {color, size: iconSize});\n    }\n    if (typeof icon === 'function') {\n        const Comp = icon as ElementType;\n        return <Comp size={iconSize} color={color} />;\n    }\n    if (typeof icon !== 'string') return null;\n    const piMatches = icon.match(/pi-([a-z-]+)/g);\n    const iconName = piMatches\n        ? (piMatches[piMatches.length - 1]!.replace('pi-', '') as IconName)\n        : (icon as IconName);\n    const Component = IconMap[iconName];\n    if (Component) return <Component size={iconSize} color={color} />;\n    return null;\n}\n\n/* ─── Button Component ───────────────────────────────────────── */\nexport function Button(rawProps: IButtonProps<IconName | string | ElementType | ReactElement>) {\n    const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('Button', rawProps);\n    const {\n        children,\n        label,\n        isLoadingText,\n        severity = 'brand',\n        size = 'md',\n        loading,\n        iconPos = 'left',\n        icon,\n        disabled,\n        outlined,\n        raised,\n        rounded,\n        testID,\n        style: styleProp,\n        onPress,\n        onClick,\n        ...rest\n    } = props;\n\n    const {t} = useLanguage();\n    const labelFont = useThemedFont('body');\n    const {cssProps, nativeProps} = useSeparator<Record<any, any>>(rest);\n    const sevColors = useSeverityColors((severity as any) ?? 'brand');\n\n    const sizeConfig = SIZE_MAP[size as keyof typeof SIZE_MAP] ?? SIZE_MAP.md;\n    const isDisabled = disabled || loading;\n\n    /* ── Resolve label text ── */\n    const resolvedLabel = typeof children === 'string'\n        ? children\n        : loading && isLoadingText\n            ? isLoadingText\n            : label ? t(label) : '';\n\n    const hasLabel = !!resolvedLabel;\n    const isIconOnly = !hasLabel && !!icon;\n\n    /* ── Severity colors ── */\n    const textColor = outlined ? sevColors.solid : sevColors.solidText;\n    const bgColor = outlined ? 'transparent' : sevColors.solid;\n    const borderColor = sevColors.border || sevColors.solid;\n\n    /* ── Build CSS props for ResponsiveElement ── */\n    const computedCss:IStyleClasses = useMemo(() => ({\n        backgroundColor: bgColor,\n        borderColor,\n        borderWidth: 1,\n        height: sizeConfig.height,\n        paddingLeft: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingRight: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingTop: sizeConfig.py,\n        paddingBottom: sizeConfig.py,\n        borderRadius: rounded ? 9999 : 6,\n        flexDirection: iconPos === 'top' || iconPos === 'bottom'\n            ? (iconPos === 'bottom' ? 'column-reverse' : 'column')\n            : (iconPos === 'right' ? 'row-reverse' : 'row'),\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: sizeConfig.gap,\n        opacity: isDisabled ? 50 : 100,\n        alignSelf: 'flex-start',\n        overflow: 'hidden',\n        ...(raised ? {\n            shadowColor: '#000',\n            shadowOffset: {width: 0, height: 3},\n            shadowOpacity: 0.16,\n            shadowRadius: 6,\n            elevation: 4,\n        } : {}),\n        // Theme overrides the defaults above: shared `root` first, then the\n        // `text` slot (label buttons) or the `iconOnly` slot. Icon-only buttons\n        // are forced square so a `root`/`text` height can never stretch them —\n        // the `iconOnly` slot can still override the square if needed.\n        ...themeStyle,\n        ...(elementStyles.root || {}),\n        ...(isIconOnly\n            ? {\n                width: sizeConfig.height,\n                height: sizeConfig.height,\n                minWidth: sizeConfig.height,\n                ...(elementStyles.iconOnly || {}),\n              }\n            : (elementStyles.text || {})),\n        ...cssProps,\n        ...styleProp,\n    }), [themeStyle, elementStyles, cssProps, bgColor, borderColor, sizeConfig,\n        hasLabel, icon, iconPos, rounded, raised, isDisabled, styleProp, isIconOnly]);\n\n    /* ── Icon element ── */\n    const iconElement = loading\n        ? <ActivityIndicator size=\"small\" color={textColor} />\n        : resolveIcon(icon, textColor, sizeConfig.iconSize);\n\n    /* ── Text style ── */\n    const labelStyle: TextStyle = useMemo(() => ({\n        color: textColor,\n        fontSize: sizeConfig.fontSize,\n        fontWeight: '600',\n        lineHeight: sizeConfig.fontSize * 1.2,\n        ...(labelFont ? {fontFamily: labelFont} : {}),\n        // Theme/per-instance label slot wins — e.g. theme.components.Button.label.style\n        // = { lineHeight: 22 } to stop Arabic (NotoKufiArabic) glyphs clipping.\n        ...((elementStyles.label as TextStyle) || {}),\n    }), [textColor, sizeConfig, labelFont, elementStyles.label]);\n\n    /* ── Press handler ── */\n    const handlePress = useCallback((e: GestureResponderEvent) => {\n        if (isDisabled) return;\n        if (onPress) onPress(e as any);\n        if (onClick) onClick(e as any);\n    }, [isDisabled, onPress, onClick]);\n\n    return (\n        <ResponsiveElement\n            as=\"Pressable\"\n            cssProps={computedCss}\n            nativeProps={{\n                ...nativeProps,\n                onPress: handlePress,\n                disabled: isDisabled,\n                testID,\n                accessibilityRole: 'button',\n                accessibilityState: {disabled: isDisabled, busy: loading},\n                accessibilityLabel: resolvedLabel || undefined,\n            }}\n        >\n            {iconElement}\n            {!!hasLabel && (\n                <RNText style={labelStyle} numberOfLines={1}>\n                    {resolvedLabel}\n                </RNText>\n            )}\n            {typeof children !== 'string' ? children : undefined}\n        </ResponsiveElement>\n    );\n}\n\nexport default Button;\n"],"names":["jsx","IconMap","useComponentDefaults","useLanguage","useThemedFont","useSeparator","useSeverityColors","useMemo","ActivityIndicator","useCallback","jsxs","ResponsiveElement","RNText"],"mappings":"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"}

package/components/Button/Button.js

@@ -57,6 +57,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import useSeparator from '../../apps/mobile/src/Factory/useSeparator.js';
 import '../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';

package/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.native.tsx"],"sourcesContent":["import React, {useMemo, useCallback, type ElementType, type ReactElement} from 'react';\nimport {\n    ActivityIndicator,\n    Text as RNText,\n    type TextStyle,\n    type GestureResponderEvent,\n} from 'react-native';\nimport type {IButtonProps, IconName, IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {ResponsiveElement, useSeparator, style as resolveStyle} from '@lmb-it/kitsconcertomobile';\nimport {IconMap} from '../../assets/Icons';\nimport {useLanguage, useComponentDefaults, useThemedFont} from '../../hooks';\nimport {useSeverityColors} from '../../hooks/useSeverityColors';\n\n/* ─── Size configuration (matches web) ────────────────────────── */\nconst SIZE_MAP = {\n    sm: {height: 32, fontSize: 12, px: 10, py: 6, gap: 6, iconSize: 14},\n    md: {height: 40, fontSize: 14, px: 16, py: 10, gap: 8, iconSize: 16},\n    lg: {height: 48, fontSize: 16, px: 24, py: 12, gap: 10, iconSize: 18},\n} as const;\n\n/* ─── Icon resolver ──────────────────────────────────────────── */\nfunction resolveIcon(\n    icon: unknown,\n    color: string,\n    iconSize: number,\n): React.ReactNode {\n    if (!icon) return null;\n    if (React.isValidElement(icon)) {\n        return React.cloneElement(icon as ReactElement<any>, {color, size: iconSize});\n    }\n    if (typeof icon === 'function') {\n        const Comp = icon as ElementType;\n        return <Comp size={iconSize} color={color} />;\n    }\n    if (typeof icon !== 'string') return null;\n    const piMatches = icon.match(/pi-([a-z-]+)/g);\n    const iconName = piMatches\n        ? (piMatches[piMatches.length - 1]!.replace('pi-', '') as IconName)\n        : (icon as IconName);\n    const Component = IconMap[iconName];\n    if (Component) return <Component size={iconSize} color={color} />;\n    return null;\n}\n\n/* ─── Button Component ───────────────────────────────────────── */\nexport function Button(rawProps: IButtonProps<IconName | string | ElementType | ReactElement>) {\n    const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('Button', rawProps);\n    const {\n        children,\n        label,\n        isLoadingText,\n        severity = 'brand',\n        size = 'md',\n        loading,\n        iconPos = 'left',\n        icon,\n        disabled,\n        outlined,\n        raised,\n        rounded,\n        testID,\n        style: styleProp,\n        onPress,\n        onClick,\n        ...rest\n    } = props;\n\n    const {t} = useLanguage();\n    const labelFont = useThemedFont('body');\n    const {cssProps, nativeProps} = useSeparator<Record<any, any>>(rest);\n    const sevColors = useSeverityColors((severity as any) ?? 'brand');\n\n    const sizeConfig = SIZE_MAP[size as keyof typeof SIZE_MAP] ?? SIZE_MAP.md;\n    const isDisabled = disabled || loading;\n\n    /* ── Resolve label text ── */\n    const resolvedLabel = typeof children === 'string'\n        ? children\n        : loading && isLoadingText\n            ? isLoadingText\n            : label ? t(label) : '';\n\n    const hasLabel = !!resolvedLabel;\n    const isIconOnly = !hasLabel && !!icon;\n\n    /* ── Severity colors ── */\n    const textColor = outlined ? sevColors.solid : sevColors.solidText;\n    const bgColor = outlined ? 'transparent' : sevColors.solid;\n    const borderColor = sevColors.border || sevColors.solid;\n\n    /* ── Build CSS props for ResponsiveElement ── */\n    const computedCss:IStyleClasses = useMemo(() => ({\n        backgroundColor: bgColor,\n        borderColor,\n        borderWidth: 1,\n        height: sizeConfig.height,\n        paddingLeft: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingRight: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingTop: sizeConfig.py,\n        paddingBottom: sizeConfig.py,\n        borderRadius: rounded ? 9999 : 6,\n        flexDirection: iconPos === 'top' || iconPos === 'bottom'\n            ? (iconPos === 'bottom' ? 'column-reverse' : 'column')\n            : (iconPos === 'right' ? 'row-reverse' : 'row'),\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: sizeConfig.gap,\n        opacity: isDisabled ? 50 : 100,\n        alignSelf: 'flex-start',\n        overflow: 'hidden',\n        ...(raised ? {\n            shadowColor: '#000',\n            shadowOffset: {width: 0, height: 3},\n            shadowOpacity: 0.16,\n            shadowRadius: 6,\n            elevation: 4,\n        } : {}),\n        // Theme overrides the defaults above: shared `root` first, then the\n        // `text` slot (label buttons) or the `iconOnly` slot. Icon-only buttons\n        // are forced square so a `root`/`text` height can never stretch them —\n        // the `iconOnly` slot can still override the square if needed.\n        ...themeStyle,\n        ...(elementStyles.root || {}),\n        ...(isIconOnly\n            ? {\n                width: sizeConfig.height,\n                height: sizeConfig.height,\n                minWidth: sizeConfig.height,\n                ...(elementStyles.iconOnly || {}),\n              }\n            : (elementStyles.text || {})),\n        ...cssProps,\n        ...styleProp,\n    }), [themeStyle, elementStyles, cssProps, bgColor, borderColor, sizeConfig,\n        hasLabel, icon, iconPos, rounded, raised, isDisabled, styleProp, isIconOnly]);\n\n    /* ── Icon element ── */\n    const iconElement = loading\n        ? <ActivityIndicator size=\"small\" color={textColor} />\n        : resolveIcon(icon, textColor, sizeConfig.iconSize);\n\n    /* ── Text style ── */\n    const labelStyle: TextStyle = useMemo(() => ({\n        color: textColor,\n        fontSize: sizeConfig.fontSize,\n        fontWeight: '600',\n        lineHeight: sizeConfig.fontSize * 1.2,\n        ...(labelFont ? {fontFamily: labelFont} : {}),\n        // Theme/per-instance label slot wins — e.g. theme.components.Button.label.style\n        // = { lineHeight: 22 } to stop Arabic (NotoKufiArabic) glyphs clipping.\n        ...((elementStyles.label as TextStyle) || {}),\n    }), [textColor, sizeConfig, labelFont, elementStyles.label]);\n\n    /* ── Press handler ── */\n    const handlePress = useCallback((e: GestureResponderEvent) => {\n        if (isDisabled) return;\n        if (onPress) onPress(e as any);\n        if (onClick) onClick(e as any);\n    }, [isDisabled, onPress, onClick]);\n\n    return (\n        <ResponsiveElement\n            as=\"Pressable\"\n            cssProps={computedCss}\n            nativeProps={{\n                ...nativeProps,\n                onPress: handlePress,\n                disabled: isDisabled,\n                testID,\n                accessibilityRole: 'button',\n                accessibilityState: {disabled: isDisabled, busy: loading},\n                accessibilityLabel: resolvedLabel || undefined,\n            }}\n        >\n            {iconElement}\n            {!!hasLabel && (\n                <RNText style={labelStyle} numberOfLines={1}>\n                    {resolvedLabel}\n                </RNText>\n            )}\n            {typeof children !== 'string' ? children : undefined}\n        </ResponsiveElement>\n    );\n}\n\nexport default Button;\n"],"names":["RNText"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.native.tsx"],"sourcesContent":["import React, {useMemo, useCallback, type ElementType, type ReactElement} from 'react';\nimport {\n    ActivityIndicator,\n    Text as RNText,\n    type TextStyle,\n    type GestureResponderEvent,\n} from 'react-native';\nimport type {IButtonProps, IconName, IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {ResponsiveElement, useSeparator, style as resolveStyle} from '@lmb-it/kitsconcertomobile';\nimport {IconMap} from '../../assets/Icons';\nimport {useLanguage, useComponentDefaults, useThemedFont} from '../../hooks';\nimport {useSeverityColors} from '../../hooks/useSeverityColors';\n\n/* ─── Size configuration (matches web) ────────────────────────── */\nconst SIZE_MAP = {\n    sm: {height: 32, fontSize: 12, px: 10, py: 6, gap: 6, iconSize: 14},\n    md: {height: 40, fontSize: 14, px: 16, py: 10, gap: 8, iconSize: 16},\n    lg: {height: 48, fontSize: 16, px: 24, py: 12, gap: 10, iconSize: 18},\n} as const;\n\n/* ─── Icon resolver ──────────────────────────────────────────── */\nfunction resolveIcon(\n    icon: unknown,\n    color: string,\n    iconSize: number,\n): React.ReactNode {\n    if (!icon) return null;\n    if (React.isValidElement(icon)) {\n        return React.cloneElement(icon as ReactElement<any>, {color, size: iconSize});\n    }\n    if (typeof icon === 'function') {\n        const Comp = icon as ElementType;\n        return <Comp size={iconSize} color={color} />;\n    }\n    if (typeof icon !== 'string') return null;\n    const piMatches = icon.match(/pi-([a-z-]+)/g);\n    const iconName = piMatches\n        ? (piMatches[piMatches.length - 1]!.replace('pi-', '') as IconName)\n        : (icon as IconName);\n    const Component = IconMap[iconName];\n    if (Component) return <Component size={iconSize} color={color} />;\n    return null;\n}\n\n/* ─── Button Component ───────────────────────────────────────── */\nexport function Button(rawProps: IButtonProps<IconName | string | ElementType | ReactElement>) {\n    const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('Button', rawProps);\n    const {\n        children,\n        label,\n        isLoadingText,\n        severity = 'brand',\n        size = 'md',\n        loading,\n        iconPos = 'left',\n        icon,\n        disabled,\n        outlined,\n        raised,\n        rounded,\n        testID,\n        style: styleProp,\n        onPress,\n        onClick,\n        ...rest\n    } = props;\n\n    const {t} = useLanguage();\n    const labelFont = useThemedFont('body');\n    const {cssProps, nativeProps} = useSeparator<Record<any, any>>(rest);\n    const sevColors = useSeverityColors((severity as any) ?? 'brand');\n\n    const sizeConfig = SIZE_MAP[size as keyof typeof SIZE_MAP] ?? SIZE_MAP.md;\n    const isDisabled = disabled || loading;\n\n    /* ── Resolve label text ── */\n    const resolvedLabel = typeof children === 'string'\n        ? children\n        : loading && isLoadingText\n            ? isLoadingText\n            : label ? t(label) : '';\n\n    const hasLabel = !!resolvedLabel;\n    const isIconOnly = !hasLabel && !!icon;\n\n    /* ── Severity colors ── */\n    const textColor = outlined ? sevColors.solid : sevColors.solidText;\n    const bgColor = outlined ? 'transparent' : sevColors.solid;\n    const borderColor = sevColors.border || sevColors.solid;\n\n    /* ── Build CSS props for ResponsiveElement ── */\n    const computedCss:IStyleClasses = useMemo(() => ({\n        backgroundColor: bgColor,\n        borderColor,\n        borderWidth: 1,\n        height: sizeConfig.height,\n        paddingLeft: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingRight: hasLabel ? sizeConfig.px : sizeConfig.py,\n        paddingTop: sizeConfig.py,\n        paddingBottom: sizeConfig.py,\n        borderRadius: rounded ? 9999 : 6,\n        flexDirection: iconPos === 'top' || iconPos === 'bottom'\n            ? (iconPos === 'bottom' ? 'column-reverse' : 'column')\n            : (iconPos === 'right' ? 'row-reverse' : 'row'),\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: sizeConfig.gap,\n        opacity: isDisabled ? 50 : 100,\n        alignSelf: 'flex-start',\n        overflow: 'hidden',\n        ...(raised ? {\n            shadowColor: '#000',\n            shadowOffset: {width: 0, height: 3},\n            shadowOpacity: 0.16,\n            shadowRadius: 6,\n            elevation: 4,\n        } : {}),\n        // Theme overrides the defaults above: shared `root` first, then the\n        // `text` slot (label buttons) or the `iconOnly` slot. Icon-only buttons\n        // are forced square so a `root`/`text` height can never stretch them —\n        // the `iconOnly` slot can still override the square if needed.\n        ...themeStyle,\n        ...(elementStyles.root || {}),\n        ...(isIconOnly\n            ? {\n                width: sizeConfig.height,\n                height: sizeConfig.height,\n                minWidth: sizeConfig.height,\n                ...(elementStyles.iconOnly || {}),\n              }\n            : (elementStyles.text || {})),\n        ...cssProps,\n        ...styleProp,\n    }), [themeStyle, elementStyles, cssProps, bgColor, borderColor, sizeConfig,\n        hasLabel, icon, iconPos, rounded, raised, isDisabled, styleProp, isIconOnly]);\n\n    /* ── Icon element ── */\n    const iconElement = loading\n        ? <ActivityIndicator size=\"small\" color={textColor} />\n        : resolveIcon(icon, textColor, sizeConfig.iconSize);\n\n    /* ── Text style ── */\n    const labelStyle: TextStyle = useMemo(() => ({\n        color: textColor,\n        fontSize: sizeConfig.fontSize,\n        fontWeight: '600',\n        lineHeight: sizeConfig.fontSize * 1.2,\n        ...(labelFont ? {fontFamily: labelFont} : {}),\n        // Theme/per-instance label slot wins — e.g. theme.components.Button.label.style\n        // = { lineHeight: 22 } to stop Arabic (NotoKufiArabic) glyphs clipping.\n        ...((elementStyles.label as TextStyle) || {}),\n    }), [textColor, sizeConfig, labelFont, elementStyles.label]);\n\n    /* ── Press handler ── */\n    const handlePress = useCallback((e: GestureResponderEvent) => {\n        if (isDisabled) return;\n        if (onPress) onPress(e as any);\n        if (onClick) onClick(e as any);\n    }, [isDisabled, onPress, onClick]);\n\n    return (\n        <ResponsiveElement\n            as=\"Pressable\"\n            cssProps={computedCss}\n            nativeProps={{\n                ...nativeProps,\n                onPress: handlePress,\n                disabled: isDisabled,\n                testID,\n                accessibilityRole: 'button',\n                accessibilityState: {disabled: isDisabled, busy: loading},\n                accessibilityLabel: resolvedLabel || undefined,\n            }}\n        >\n            {iconElement}\n            {!!hasLabel && (\n                <RNText style={labelStyle} numberOfLines={1}>\n                    {resolvedLabel}\n                </RNText>\n            )}\n            {typeof children !== 'string' ? children : undefined}\n        </ResponsiveElement>\n    );\n}\n\nexport default Button;\n"],"names":["RNText"],"mappings":"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"}

package/components/MessageComposer/index.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('i18next');
 require('react-i18next');
 require('../../apps/mobile/src/Core/AutoComplete/index.cjs');

package/components/MessageComposer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/MessageComposer/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {View, Text, TextInput, TouchableOpacity} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {IMessageComposerProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n/**\n * MessageComposer (native) — attach + multiline input + send, mirroring the\n * app's chat input bar (RN TextInput + TouchableOpacity, library Icon).\n */\nexport function MessageComposer(rawProps: IMessageComposerProps) {\n    const props = useComponentDefaults<IMessageComposerProps>(\"MessageComposer\", rawProps).mergedProps;\n    const {value, onChangeText, onSend, onAttach, placeholder = \"Message…\", sendDisabled, accentColor = \"brand\", locked, lockedLabel, attachDisabled, attachHint, onSelectionChange, selection, inputRef, testID} = props;\n\n    const accent = resolveThemeTokenForNative(accentColor);\n    const surface = resolveThemeTokenForNative(\"surface-card\");\n    const border = resolveThemeTokenForNative(\"surface-border\");\n    const fieldBg = resolveThemeTokenForNative(\"gray.100\");\n    const textColor = resolveThemeTokenForNative(\"text\");\n    const muted = resolveThemeTokenForNative(\"text-secondary\");\n    const disabledBg = resolveThemeTokenForNative(\"gray.300\");\n\n    if (locked) {\n        return (\n            <View\n                testID={testID}\n                style={{\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    paddingHorizontal: 12,\n                    paddingVertical: 10,\n                    backgroundColor: surface,\n                    borderTopWidth: 1,\n                    borderTopColor: border,\n                }}\n            >\n                <View\n                    style={{\n                        flexGrow: 1,\n                        flexDirection: \"row\",\n                        alignItems: \"center\",\n                        gap: 10,\n                        backgroundColor: fieldBg,\n                        borderWidth: 1,\n                        borderColor: border,\n                        borderRadius: 999,\n                        paddingHorizontal: 16,\n                        paddingVertical: 11,\n                    }}\n                >\n                    <Icon name=\"lock\" size={17} color={muted} />\n                    {lockedLabel != null && <Text style={{fontSize: 13, color: muted}}>{lockedLabel}</Text>}\n                </View>\n            </View>\n        );\n    }\n\n    const canSend = sendDisabled != null ? !sendDisabled : value.trim().length > 0;\n\n    // Shared field + send (referenced by the default row AND the attach-disabled\n    // branch — single source, so the input is never duplicated).\n    //\n    // onSelectionChange is adapted from RN's NativeSyntheticEvent shape to the\n    // platform-agnostic {start, end} contract declared on IMessageComposerProps,\n    // so consumers (e.g. @mention pickers) read the same shape on native and web.\n    const field = (\n        <TextInput\n            ref={inputRef as React.Ref<TextInput>}\n            style={{\n                flex: 1,\n                backgroundColor: fieldBg,\n                borderRadius: 20,\n                paddingHorizontal: 14,\n                paddingVertical: 8,\n                fontSize: 14,\n                color: textColor,\n                // Pin a single-line floor (= the 36px send button) so a\n                // multiline RN TextInput doesn't measure a taller default on\n                // frame 1 then settle on frame 2 — that re-measure re-flexes\n                // the chat thread above it (a small shift-then-settle on open).\n                // Still grows up to maxHeight when typing multiple lines.\n                minHeight: 36,\n                maxHeight: 120,\n            }}\n            placeholder={placeholder}\n            placeholderTextColor={muted}\n            value={value}\n            onChangeText={onChangeText}\n            selection={selection as {start: number; end?: number} | undefined}\n            onSelectionChange={\n                onSelectionChange\n                    ? e => onSelectionChange({start: e.nativeEvent.selection.start, end: e.nativeEvent.selection.end})\n                    : undefined\n            }\n            multiline\n        />\n    );\n\n    const sendBtn = (\n        <TouchableOpacity\n            onPress={() => canSend && onSend?.()}\n            disabled={!canSend}\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Send\"\n            style={{\n                width: 36,\n                height: 36,\n                borderRadius: 18,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                backgroundColor: canSend ? accent : disabledBg,\n            }}\n        >\n            <Icon name=\"send\" size={18} color=\"#FFFFFF\" />\n        </TouchableOpacity>\n    );\n\n    if (attachDisabled) {\n        return (\n            <View\n                testID={testID}\n                style={{\n                    paddingVertical: 10,\n                    backgroundColor: surface,\n                    borderTopWidth: 1,\n                    borderTopColor: border,\n                }}\n            >\n                {attachHint != null && (\n                    <View style={{flexDirection: \"row\", alignItems: \"center\", gap: 6, paddingHorizontal: 12, paddingBottom: 8}}>\n                        <Icon name=\"info\" size={12} color={muted} />\n                        <Text style={{fontSize: 11, color: muted}}>{attachHint}</Text>\n                    </View>\n                )}\n                <View style={{flexDirection: \"row\", alignItems: \"flex-end\", gap: 8, paddingHorizontal: 12}}>\n                    {onAttach != null && (\n                        <View style={{width: 36, height: 36, alignItems: \"center\", justifyContent: \"center\", opacity: 0.5}}>\n                            <Icon name=\"paperclip\" size={20} color={muted} />\n                        </View>\n                    )}\n                    {field}\n                    {sendBtn}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View\n            testID={testID}\n            style={{\n                flexDirection: \"row\",\n                alignItems: \"flex-end\",\n                gap: 8,\n                paddingHorizontal: 12,\n                paddingVertical: 10,\n                backgroundColor: surface,\n                borderTopWidth: 1,\n                borderTopColor: border,\n            }}\n        >\n            {onAttach != null && (\n                <TouchableOpacity\n                    onPress={onAttach}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel=\"Attach\"\n                    style={{width: 36, height: 36, alignItems: \"center\", justifyContent: \"center\"}}\n                >\n                    <Icon name=\"paperclip\" size={20} color={muted} />\n                </TouchableOpacity>\n            )}\n            {field}\n            {sendBtn}\n        </View>\n    );\n}\n\nexport default MessageComposer;\n"],"names":["useComponentDefaults","resolveThemeTokenForNative","jsx","View","jsxs","Icon","Text","TextInput","TouchableOpacity"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/MessageComposer/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {View, Text, TextInput, TouchableOpacity} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {IMessageComposerProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n/**\n * MessageComposer (native) — attach + multiline input + send, mirroring the\n * app's chat input bar (RN TextInput + TouchableOpacity, library Icon).\n */\nexport function MessageComposer(rawProps: IMessageComposerProps) {\n    const props = useComponentDefaults<IMessageComposerProps>(\"MessageComposer\", rawProps).mergedProps;\n    const {value, onChangeText, onSend, onAttach, placeholder = \"Message…\", sendDisabled, accentColor = \"brand\", locked, lockedLabel, attachDisabled, attachHint, onSelectionChange, selection, inputRef, testID} = props;\n\n    const accent = resolveThemeTokenForNative(accentColor);\n    const surface = resolveThemeTokenForNative(\"surface-card\");\n    const border = resolveThemeTokenForNative(\"surface-border\");\n    const fieldBg = resolveThemeTokenForNative(\"gray.100\");\n    const textColor = resolveThemeTokenForNative(\"text\");\n    const muted = resolveThemeTokenForNative(\"text-secondary\");\n    const disabledBg = resolveThemeTokenForNative(\"gray.300\");\n\n    if (locked) {\n        return (\n            <View\n                testID={testID}\n                style={{\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    paddingHorizontal: 12,\n                    paddingVertical: 10,\n                    backgroundColor: surface,\n                    borderTopWidth: 1,\n                    borderTopColor: border,\n                }}\n            >\n                <View\n                    style={{\n                        flexGrow: 1,\n                        flexDirection: \"row\",\n                        alignItems: \"center\",\n                        gap: 10,\n                        backgroundColor: fieldBg,\n                        borderWidth: 1,\n                        borderColor: border,\n                        borderRadius: 999,\n                        paddingHorizontal: 16,\n                        paddingVertical: 11,\n                    }}\n                >\n                    <Icon name=\"lock\" size={17} color={muted} />\n                    {lockedLabel != null && <Text style={{fontSize: 13, color: muted}}>{lockedLabel}</Text>}\n                </View>\n            </View>\n        );\n    }\n\n    const canSend = sendDisabled != null ? !sendDisabled : value.trim().length > 0;\n\n    // Shared field + send (referenced by the default row AND the attach-disabled\n    // branch — single source, so the input is never duplicated).\n    //\n    // onSelectionChange is adapted from RN's NativeSyntheticEvent shape to the\n    // platform-agnostic {start, end} contract declared on IMessageComposerProps,\n    // so consumers (e.g. @mention pickers) read the same shape on native and web.\n    const field = (\n        <TextInput\n            ref={inputRef as React.Ref<TextInput>}\n            style={{\n                flex: 1,\n                backgroundColor: fieldBg,\n                borderRadius: 20,\n                paddingHorizontal: 14,\n                paddingVertical: 8,\n                fontSize: 14,\n                color: textColor,\n                // Pin a single-line floor (= the 36px send button) so a\n                // multiline RN TextInput doesn't measure a taller default on\n                // frame 1 then settle on frame 2 — that re-measure re-flexes\n                // the chat thread above it (a small shift-then-settle on open).\n                // Still grows up to maxHeight when typing multiple lines.\n                minHeight: 36,\n                maxHeight: 120,\n            }}\n            placeholder={placeholder}\n            placeholderTextColor={muted}\n            value={value}\n            onChangeText={onChangeText}\n            selection={selection as {start: number; end?: number} | undefined}\n            onSelectionChange={\n                onSelectionChange\n                    ? e => onSelectionChange({start: e.nativeEvent.selection.start, end: e.nativeEvent.selection.end})\n                    : undefined\n            }\n            multiline\n        />\n    );\n\n    const sendBtn = (\n        <TouchableOpacity\n            onPress={() => canSend && onSend?.()}\n            disabled={!canSend}\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Send\"\n            style={{\n                width: 36,\n                height: 36,\n                borderRadius: 18,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                backgroundColor: canSend ? accent : disabledBg,\n            }}\n        >\n            <Icon name=\"send\" size={18} color=\"#FFFFFF\" />\n        </TouchableOpacity>\n    );\n\n    if (attachDisabled) {\n        return (\n            <View\n                testID={testID}\n                style={{\n                    paddingVertical: 10,\n                    backgroundColor: surface,\n                    borderTopWidth: 1,\n                    borderTopColor: border,\n                }}\n            >\n                {attachHint != null && (\n                    <View style={{flexDirection: \"row\", alignItems: \"center\", gap: 6, paddingHorizontal: 12, paddingBottom: 8}}>\n                        <Icon name=\"info\" size={12} color={muted} />\n                        <Text style={{fontSize: 11, color: muted}}>{attachHint}</Text>\n                    </View>\n                )}\n                <View style={{flexDirection: \"row\", alignItems: \"flex-end\", gap: 8, paddingHorizontal: 12}}>\n                    {onAttach != null && (\n                        <View style={{width: 36, height: 36, alignItems: \"center\", justifyContent: \"center\", opacity: 0.5}}>\n                            <Icon name=\"paperclip\" size={20} color={muted} />\n                        </View>\n                    )}\n                    {field}\n                    {sendBtn}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View\n            testID={testID}\n            style={{\n                flexDirection: \"row\",\n                alignItems: \"flex-end\",\n                gap: 8,\n                paddingHorizontal: 12,\n                paddingVertical: 10,\n                backgroundColor: surface,\n                borderTopWidth: 1,\n                borderTopColor: border,\n            }}\n        >\n            {onAttach != null && (\n                <TouchableOpacity\n                    onPress={onAttach}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel=\"Attach\"\n                    style={{width: 36, height: 36, alignItems: \"center\", justifyContent: \"center\"}}\n                >\n                    <Icon name=\"paperclip\" size={20} color={muted} />\n                </TouchableOpacity>\n            )}\n            {field}\n            {sendBtn}\n        </View>\n    );\n}\n\nexport default MessageComposer;\n"],"names":["useComponentDefaults","resolveThemeTokenForNative","jsx","View","jsxs","Icon","Text","TextInput","TouchableOpacity"],"mappings":"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"}

package/components/MessageComposer/index.js

@@ -59,6 +59,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';
 import 'react-i18next';
 import '../../apps/mobile/src/Core/AutoComplete/index.js';

package/components/MessageComposer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/MessageComposer/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {View, Text, TextInput, TouchableOpacity} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {IMessageComposerProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n/**\n * MessageComposer (native) — attach + multiline input + send, mirroring the\n * app's chat input bar (RN TextInput + TouchableOpacity, library Icon).\n */\nexport function MessageComposer(rawProps: IMessageComposerProps) {\n    const props = useComponentDefaults<IMessageComposerProps>(\"MessageComposer\", rawProps).mergedProps;\n    const {value, onChangeText, onSend, onAttach, placeholder = \"Message…\", sendDisabled, accentColor = \"brand\", locked, lockedLabel, attachDisabled, attachHint, onSelectionChange, selection, inputRef, testID} = props;\n\n    const accent = resolveThemeTokenForNative(accentColor);\n    const surface = resolveThemeTokenForNative(\"surface-card\");\n    const border = resolveThemeTokenForNative(\"surface-border\");\n    const fieldBg = resolveThemeTokenForNative(\"gray.100\");\n    const textColor = resolveThemeTokenForNative(\"text\");\n    const muted = resolveThemeTokenForNative(\"text-secondary\");\n    const disabledBg = resolveThemeTokenForNative(\"gray.300\");\n\n    if (locked) {\n        return (\n            <View\n                testID={testID}\n                style={{\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    paddingHorizontal: 12,\n                    paddingVertical: 10,\n                    backgroundColor: surface,\n                    borderTopWidth: 1,\n                    borderTopColor: border,\n                }}\n            >\n                <View\n                    style={{\n                        flexGrow: 1,\n                        flexDirection: \"row\",\n                        alignItems: \"center\",\n                        gap: 10,\n                        backgroundColor: fieldBg,\n                        borderWidth: 1,\n                        borderColor: border,\n                        borderRadius: 999,\n                        paddingHorizontal: 16,\n                        paddingVertical: 11,\n                    }}\n                >\n                    <Icon name=\"lock\" size={17} color={muted} />\n                    {lockedLabel != null && <Text style={{fontSize: 13, color: muted}}>{lockedLabel}</Text>}\n                </View>\n            </View>\n        );\n    }\n\n    const canSend = sendDisabled != null ? !sendDisabled : value.trim().length > 0;\n\n    // Shared field + send (referenced by the default row AND the attach-disabled\n    // branch — single source, so the input is never duplicated).\n    //\n    // onSelectionChange is adapted from RN's NativeSyntheticEvent shape to the\n    // platform-agnostic {start, end} contract declared on IMessageComposerProps,\n    // so consumers (e.g. @mention pickers) read the same shape on native and web.\n    const field = (\n        <TextInput\n            ref={inputRef as React.Ref<TextInput>}\n            style={{\n                flex: 1,\n                backgroundColor: fieldBg,\n                borderRadius: 20,\n                paddingHorizontal: 14,\n                paddingVertical: 8,\n                fontSize: 14,\n                color: textColor,\n                // Pin a single-line floor (= the 36px send button) so a\n                // multiline RN TextInput doesn't measure a taller default on\n                // frame 1 then settle on frame 2 — that re-measure re-flexes\n                // the chat thread above it (a small shift-then-settle on open).\n                // Still grows up to maxHeight when typing multiple lines.\n                minHeight: 36,\n                maxHeight: 120,\n            }}\n            placeholder={placeholder}\n            placeholderTextColor={muted}\n            value={value}\n            onChangeText={onChangeText}\n            selection={selection as {start: number; end?: number} | undefined}\n            onSelectionChange={\n                onSelectionChange\n                    ? e => onSelectionChange({start: e.nativeEvent.selection.start, end: e.nativeEvent.selection.end})\n                    : undefined\n            }\n            multiline\n        />\n    );\n\n    const sendBtn = (\n        <TouchableOpacity\n            onPress={() => canSend && onSend?.()}\n            disabled={!canSend}\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Send\"\n            style={{\n                width: 36,\n                height: 36,\n                borderRadius: 18,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                backgroundColor: canSend ? accent : disabledBg,\n            }}\n        >\n            <Icon name=\"send\" size={18} color=\"#FFFFFF\" />\n        </TouchableOpacity>\n    );\n\n    if (attachDisabled) {\n        return (\n            <View\n                testID={testID}\n                style={{\n                    paddingVertical: 10,\n                    backgroundColor: surface,\n                    borderTopWidth: 1,\n                    borderTopColor: border,\n                }}\n            >\n                {attachHint != null && (\n                    <View style={{flexDirection: \"row\", alignItems: \"center\", gap: 6, paddingHorizontal: 12, paddingBottom: 8}}>\n                        <Icon name=\"info\" size={12} color={muted} />\n                        <Text style={{fontSize: 11, color: muted}}>{attachHint}</Text>\n                    </View>\n                )}\n                <View style={{flexDirection: \"row\", alignItems: \"flex-end\", gap: 8, paddingHorizontal: 12}}>\n                    {onAttach != null && (\n                        <View style={{width: 36, height: 36, alignItems: \"center\", justifyContent: \"center\", opacity: 0.5}}>\n                            <Icon name=\"paperclip\" size={20} color={muted} />\n                        </View>\n                    )}\n                    {field}\n                    {sendBtn}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View\n            testID={testID}\n            style={{\n                flexDirection: \"row\",\n                alignItems: \"flex-end\",\n                gap: 8,\n                paddingHorizontal: 12,\n                paddingVertical: 10,\n                backgroundColor: surface,\n                borderTopWidth: 1,\n                borderTopColor: border,\n            }}\n        >\n            {onAttach != null && (\n                <TouchableOpacity\n                    onPress={onAttach}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel=\"Attach\"\n                    style={{width: 36, height: 36, alignItems: \"center\", justifyContent: \"center\"}}\n                >\n                    <Icon name=\"paperclip\" size={20} color={muted} />\n                </TouchableOpacity>\n            )}\n            {field}\n            {sendBtn}\n        </View>\n    );\n}\n\nexport default MessageComposer;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/MessageComposer/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {View, Text, TextInput, TouchableOpacity} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {IMessageComposerProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n/**\n * MessageComposer (native) — attach + multiline input + send, mirroring the\n * app's chat input bar (RN TextInput + TouchableOpacity, library Icon).\n */\nexport function MessageComposer(rawProps: IMessageComposerProps) {\n    const props = useComponentDefaults<IMessageComposerProps>(\"MessageComposer\", rawProps).mergedProps;\n    const {value, onChangeText, onSend, onAttach, placeholder = \"Message…\", sendDisabled, accentColor = \"brand\", locked, lockedLabel, attachDisabled, attachHint, onSelectionChange, selection, inputRef, testID} = props;\n\n    const accent = resolveThemeTokenForNative(accentColor);\n    const surface = resolveThemeTokenForNative(\"surface-card\");\n    const border = resolveThemeTokenForNative(\"surface-border\");\n    const fieldBg = resolveThemeTokenForNative(\"gray.100\");\n    const textColor = resolveThemeTokenForNative(\"text\");\n    const muted = resolveThemeTokenForNative(\"text-secondary\");\n    const disabledBg = resolveThemeTokenForNative(\"gray.300\");\n\n    if (locked) {\n        return (\n            <View\n                testID={testID}\n                style={{\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    paddingHorizontal: 12,\n                    paddingVertical: 10,\n                    backgroundColor: surface,\n                    borderTopWidth: 1,\n                    borderTopColor: border,\n                }}\n            >\n                <View\n                    style={{\n                        flexGrow: 1,\n                        flexDirection: \"row\",\n                        alignItems: \"center\",\n                        gap: 10,\n                        backgroundColor: fieldBg,\n                        borderWidth: 1,\n                        borderColor: border,\n                        borderRadius: 999,\n                        paddingHorizontal: 16,\n                        paddingVertical: 11,\n                    }}\n                >\n                    <Icon name=\"lock\" size={17} color={muted} />\n                    {lockedLabel != null && <Text style={{fontSize: 13, color: muted}}>{lockedLabel}</Text>}\n                </View>\n            </View>\n        );\n    }\n\n    const canSend = sendDisabled != null ? !sendDisabled : value.trim().length > 0;\n\n    // Shared field + send (referenced by the default row AND the attach-disabled\n    // branch — single source, so the input is never duplicated).\n    //\n    // onSelectionChange is adapted from RN's NativeSyntheticEvent shape to the\n    // platform-agnostic {start, end} contract declared on IMessageComposerProps,\n    // so consumers (e.g. @mention pickers) read the same shape on native and web.\n    const field = (\n        <TextInput\n            ref={inputRef as React.Ref<TextInput>}\n            style={{\n                flex: 1,\n                backgroundColor: fieldBg,\n                borderRadius: 20,\n                paddingHorizontal: 14,\n                paddingVertical: 8,\n                fontSize: 14,\n                color: textColor,\n                // Pin a single-line floor (= the 36px send button) so a\n                // multiline RN TextInput doesn't measure a taller default on\n                // frame 1 then settle on frame 2 — that re-measure re-flexes\n                // the chat thread above it (a small shift-then-settle on open).\n                // Still grows up to maxHeight when typing multiple lines.\n                minHeight: 36,\n                maxHeight: 120,\n            }}\n            placeholder={placeholder}\n            placeholderTextColor={muted}\n            value={value}\n            onChangeText={onChangeText}\n            selection={selection as {start: number; end?: number} | undefined}\n            onSelectionChange={\n                onSelectionChange\n                    ? e => onSelectionChange({start: e.nativeEvent.selection.start, end: e.nativeEvent.selection.end})\n                    : undefined\n            }\n            multiline\n        />\n    );\n\n    const sendBtn = (\n        <TouchableOpacity\n            onPress={() => canSend && onSend?.()}\n            disabled={!canSend}\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Send\"\n            style={{\n                width: 36,\n                height: 36,\n                borderRadius: 18,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                backgroundColor: canSend ? accent : disabledBg,\n            }}\n        >\n            <Icon name=\"send\" size={18} color=\"#FFFFFF\" />\n        </TouchableOpacity>\n    );\n\n    if (attachDisabled) {\n        return (\n            <View\n                testID={testID}\n                style={{\n                    paddingVertical: 10,\n                    backgroundColor: surface,\n                    borderTopWidth: 1,\n                    borderTopColor: border,\n                }}\n            >\n                {attachHint != null && (\n                    <View style={{flexDirection: \"row\", alignItems: \"center\", gap: 6, paddingHorizontal: 12, paddingBottom: 8}}>\n                        <Icon name=\"info\" size={12} color={muted} />\n                        <Text style={{fontSize: 11, color: muted}}>{attachHint}</Text>\n                    </View>\n                )}\n                <View style={{flexDirection: \"row\", alignItems: \"flex-end\", gap: 8, paddingHorizontal: 12}}>\n                    {onAttach != null && (\n                        <View style={{width: 36, height: 36, alignItems: \"center\", justifyContent: \"center\", opacity: 0.5}}>\n                            <Icon name=\"paperclip\" size={20} color={muted} />\n                        </View>\n                    )}\n                    {field}\n                    {sendBtn}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View\n            testID={testID}\n            style={{\n                flexDirection: \"row\",\n                alignItems: \"flex-end\",\n                gap: 8,\n                paddingHorizontal: 12,\n                paddingVertical: 10,\n                backgroundColor: surface,\n                borderTopWidth: 1,\n                borderTopColor: border,\n            }}\n        >\n            {onAttach != null && (\n                <TouchableOpacity\n                    onPress={onAttach}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel=\"Attach\"\n                    style={{width: 36, height: 36, alignItems: \"center\", justifyContent: \"center\"}}\n                >\n                    <Icon name=\"paperclip\" size={20} color={muted} />\n                </TouchableOpacity>\n            )}\n            {field}\n            {sendBtn}\n        </View>\n    );\n}\n\nexport default MessageComposer;\n"],"names":[],"mappings":"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"}

package/components/SegmentedControl/index.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 var useSeparator = require('../../apps/mobile/src/Factory/useSeparator.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');

package/components/SegmentedControl/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/SegmentedControl/index.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport type {ISegmentedControlProps} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport {useComponentDefaults} from \"../../hooks\";\nimport {useKitsTheme} from \"../../contexts/Theme\";\n\nconst SIZE_MAP = {\n    sm: {height: 30, fontSize: 11, px: 8, py: 4, descSize: 9.5, gap: 2},\n    md: {height: 36, fontSize: 12.5, px: 12, py: 6, descSize: 10.5, gap: 4},\n    lg: {height: 44, fontSize: 14, px: 16, py: 10, descSize: 11, gap: 4},\n} as const;\n\nexport function SegmentedControl<V extends string | number = string>(rawProps: ISegmentedControlProps<V>) {\n    const {mergedProps: props, themeStyle} = useComponentDefaults<ISegmentedControlProps<V>>(\n        \"SegmentedControl\",\n        rawProps as any,\n    );\n\n    const {\n        options,\n        value,\n        onChange,\n        size = \"md\",\n        fullWidth = true,\n        disabled,\n        id,\n        testID,\n        ...rest\n    } = props;\n\n    const {cssProps, nativeProps} = useSeparator<HTMLDivElement>(rest as any);\n    const {resolveToken} = useKitsTheme();\n    const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;\n\n    const trackBg = resolveToken(\"surface-ground\");\n    const borderColor = resolveToken(\"surface-border\");\n    const inactiveText = resolveToken(\"text-secondary\");\n\n    const containerCss = useMemo(\n        () => ({\n            ...themeStyle,\n            ...cssProps,\n            display: \"inline-flex\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            gap: 2,\n            padding: 2,\n            backgroundColor: trackBg,\n            border: `1px solid ${borderColor}`,\n            borderRadius: 8,\n            ...(fullWidth ? {width: \"100%\"} : {}),\n            ...(disabled ? {opacity: \"0.55\", pointerEvents: \"none\" as const} : {}),\n        }),\n        [themeStyle, cssProps, trackBg, borderColor, fullWidth, disabled],\n    );\n\n    return (\n        <ResponsiveElement\n            as=\"Box\"\n            //@ts-ignore\n            cssProps={containerCss}\n            nativeProps={{...nativeProps, id, \"data-testid\": testID, role: \"tablist\"}}\n            additionalStyles={{}}\n        >\n            {options.map(opt => {\n                const selected = opt.value === value;\n                const isDisabled = disabled || opt.disabled;\n                const accent = opt.color ? resolveToken(opt.color) : resolveToken(\"primary\");\n\n                const buttonCss = {\n                    flex: fullWidth ? 1 : undefined,\n                    minHeight: sizeConfig.height,\n                    paddingLeft: sizeConfig.px,\n                    paddingRight: sizeConfig.px,\n                    paddingTop: sizeConfig.py,\n                    paddingBottom: sizeConfig.py,\n                    borderRadius: 6,\n                    border: \"none\",\n                    cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n                    background: selected ? accent : \"transparent\",\n                    color: selected ? \"#FFFFFF\" : inactiveText,\n                    fontFamily: \"inherit\",\n                    fontWeight: \"700\",\n                    fontSize: sizeConfig.fontSize,\n                    lineHeight: \"1.1\",\n                    transition: \"background-color 0.15s, color 0.15s, box-shadow 0.15s\",\n                    boxShadow: selected ? \"0 1px 2px rgba(0,0,0,0.06)\" : \"none\",\n                    outline: \"none\",\n                    display: \"flex\",\n                    flexDirection: \"column\" as const,\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: sizeConfig.gap,\n                    textAlign: \"center\" as const,\n                };\n\n                return (\n                    <button\n                        key={String(opt.value)}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={selected}\n                        disabled={isDisabled}\n                        onClick={() => !isDisabled && onChange(opt.value)}\n                        style={buttonCss as any}\n                    >\n                        <span style={{lineHeight: \"1.1\"}}>{opt.label}</span>\n                        {opt.description && (\n                            <span\n                                style={{\n                                    fontSize: sizeConfig.descSize,\n                                    fontWeight: 600,\n                                    opacity: selected ? 0.85 : 0.7,\n                                }}\n                            >\n                                {opt.description}\n                            </span>\n                        )}\n                    </button>\n                );\n            })}\n        </ResponsiveElement>\n    );\n}\n\nexport default SegmentedControl;\n"],"names":["useComponentDefaults","useSeparator","useKitsTheme","useMemo","jsx","ResponsiveElement","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SegmentedControl/index.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport type {ISegmentedControlProps} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport {useComponentDefaults} from \"../../hooks\";\nimport {useKitsTheme} from \"../../contexts/Theme\";\n\nconst SIZE_MAP = {\n    sm: {height: 30, fontSize: 11, px: 8, py: 4, descSize: 9.5, gap: 2},\n    md: {height: 36, fontSize: 12.5, px: 12, py: 6, descSize: 10.5, gap: 4},\n    lg: {height: 44, fontSize: 14, px: 16, py: 10, descSize: 11, gap: 4},\n} as const;\n\nexport function SegmentedControl<V extends string | number = string>(rawProps: ISegmentedControlProps<V>) {\n    const {mergedProps: props, themeStyle} = useComponentDefaults<ISegmentedControlProps<V>>(\n        \"SegmentedControl\",\n        rawProps as any,\n    );\n\n    const {\n        options,\n        value,\n        onChange,\n        size = \"md\",\n        fullWidth = true,\n        disabled,\n        id,\n        testID,\n        ...rest\n    } = props;\n\n    const {cssProps, nativeProps} = useSeparator<HTMLDivElement>(rest as any);\n    const {resolveToken} = useKitsTheme();\n    const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;\n\n    const trackBg = resolveToken(\"surface-ground\");\n    const borderColor = resolveToken(\"surface-border\");\n    const inactiveText = resolveToken(\"text-secondary\");\n\n    const containerCss = useMemo(\n        () => ({\n            ...themeStyle,\n            ...cssProps,\n            display: \"inline-flex\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            gap: 2,\n            padding: 2,\n            backgroundColor: trackBg,\n            border: `1px solid ${borderColor}`,\n            borderRadius: 8,\n            ...(fullWidth ? {width: \"100%\"} : {}),\n            ...(disabled ? {opacity: \"0.55\", pointerEvents: \"none\" as const} : {}),\n        }),\n        [themeStyle, cssProps, trackBg, borderColor, fullWidth, disabled],\n    );\n\n    return (\n        <ResponsiveElement\n            as=\"Box\"\n            //@ts-ignore\n            cssProps={containerCss}\n            nativeProps={{...nativeProps, id, \"data-testid\": testID, role: \"tablist\"}}\n            additionalStyles={{}}\n        >\n            {options.map(opt => {\n                const selected = opt.value === value;\n                const isDisabled = disabled || opt.disabled;\n                const accent = opt.color ? resolveToken(opt.color) : resolveToken(\"primary\");\n\n                const buttonCss = {\n                    flex: fullWidth ? 1 : undefined,\n                    minHeight: sizeConfig.height,\n                    paddingLeft: sizeConfig.px,\n                    paddingRight: sizeConfig.px,\n                    paddingTop: sizeConfig.py,\n                    paddingBottom: sizeConfig.py,\n                    borderRadius: 6,\n                    border: \"none\",\n                    cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n                    background: selected ? accent : \"transparent\",\n                    color: selected ? \"#FFFFFF\" : inactiveText,\n                    fontFamily: \"inherit\",\n                    fontWeight: \"700\",\n                    fontSize: sizeConfig.fontSize,\n                    lineHeight: \"1.1\",\n                    transition: \"background-color 0.15s, color 0.15s, box-shadow 0.15s\",\n                    boxShadow: selected ? \"0 1px 2px rgba(0,0,0,0.06)\" : \"none\",\n                    outline: \"none\",\n                    display: \"flex\",\n                    flexDirection: \"column\" as const,\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: sizeConfig.gap,\n                    textAlign: \"center\" as const,\n                };\n\n                return (\n                    <button\n                        key={String(opt.value)}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={selected}\n                        disabled={isDisabled}\n                        onClick={() => !isDisabled && onChange(opt.value)}\n                        style={buttonCss as any}\n                    >\n                        <span style={{lineHeight: \"1.1\"}}>{opt.label}</span>\n                        {opt.description && (\n                            <span\n                                style={{\n                                    fontSize: sizeConfig.descSize,\n                                    fontWeight: 600,\n                                    opacity: selected ? 0.85 : 0.7,\n                                }}\n                            >\n                                {opt.description}\n                            </span>\n                        )}\n                    </button>\n                );\n            })}\n        </ResponsiveElement>\n    );\n}\n\nexport default SegmentedControl;\n"],"names":["useComponentDefaults","useSeparator","useKitsTheme","useMemo","jsx","ResponsiveElement","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,QAAA,GAAW;AAAA,EACb,EAAA,EAAI,EAAC,MAAA,EAAQ,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,EAAA,EAAI,CAAA,EAAG,QAAA,EAAU,GAAA,EAAK,KAAK,CAAA,EAAC;AAAA,EAClE,EAAA,EAAI,EAAC,MAAA,EAAQ,EAAA,EAAI,QAAA,EAAU,IAAA,EAAM,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,QAAA,EAAU,IAAA,EAAM,KAAK,CAAA,EAAC;AAAA,EACtE,EAAA,EAAI,EAAC,MAAA,EAAQ,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,KAAK,CAAA;AACtE,CAAA;AAEO,SAAS,iBAAqD,QAAA,EAAqC;AACtG,EAAA,MAAM,EAAC,WAAA,EAAa,KAAA,EAAO,UAAA,EAAU,GAAIA,4BAAA;AAAA,IACrC,kBAAA;AAAA,IACA;AAAA,GACJ;AAEA,EAAA,MAAM;AAAA,IACF,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA,GAAO,IAAA;AAAA,IACP,SAAA,GAAY,IAAA;AAAA,IACZ,QAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAIC,qBAA6B,IAAW,CAAA;AACxE,EAAA,MAAM,EAAC,YAAA,EAAY,GAAIC,qCAAA,EAAa;AACpC,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,IAAI,CAAA,IAAK,QAAA,CAAS,EAAA;AAE9C,EAAA,MAAM,OAAA,GAAU,aAAa,gBAAgB,CAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,aAAa,gBAAgB,CAAA;AACjD,EAAA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAElD,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACjB,OAAO;AAAA,MACH,GAAG,UAAA;AAAA,MACH,GAAG,QAAA;AAAA,MACH,OAAA,EAAS,aAAA;AAAA,MACT,aAAA,EAAe,KAAA;AAAA,MACf,UAAA,EAAY,SAAA;AAAA,MACZ,GAAA,EAAK,CAAA;AAAA,MACL,OAAA,EAAS,CAAA;AAAA,MACT,eAAA,EAAiB,OAAA;AAAA,MACjB,MAAA,EAAQ,aAAa,WAAW,CAAA,CAAA;AAAA,MAChC,YAAA,EAAc,CAAA;AAAA,MACd,GAAI,SAAA,GAAY,EAAC,KAAA,EAAO,MAAA,KAAU,EAAC;AAAA,MACnC,GAAI,WAAW,EAAC,OAAA,EAAS,QAAQ,aAAA,EAAe,MAAA,KAAmB;AAAC,KACxE,CAAA;AAAA,IACA,CAAC,UAAA,EAAY,QAAA,EAAU,OAAA,EAAS,WAAA,EAAa,WAAW,QAAQ;AAAA,GACpE;AAEA,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,EAAA,EAAG,KAAA;AAAA,MAEH,QAAA,EAAU,YAAA;AAAA,MACV,WAAA,EAAa,EAAC,GAAG,WAAA,EAAa,IAAI,aAAA,EAAe,MAAA,EAAQ,MAAM,SAAA,EAAS;AAAA,MACxE,kBAAkB,EAAC;AAAA,MAElB,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,GAAA,KAAO;AAChB,QAAA,MAAM,QAAA,GAAW,IAAI,KAAA,KAAU,KAAA;AAC/B,QAAA,MAAM,UAAA,GAAa,YAAY,GAAA,CAAI,QAAA;AACnC,QAAA,MAAM,MAAA,GAAS,IAAI,KAAA,GAAQ,YAAA,CAAa,IAAI,KAAK,CAAA,GAAI,aAAa,SAAS,CAAA;AAE3E,QAAA,MAAM,SAAA,GAAY;AAAA,UACd,IAAA,EAAM,YAAY,CAAA,GAAI,MAAA;AAAA,UACtB,WAAW,UAAA,CAAW,MAAA;AAAA,UACtB,aAAa,UAAA,CAAW,EAAA;AAAA,UACxB,cAAc,UAAA,CAAW,EAAA;AAAA,UACzB,YAAY,UAAA,CAAW,EAAA;AAAA,UACvB,eAAe,UAAA,CAAW,EAAA;AAAA,UAC1B,YAAA,EAAc,CAAA;AAAA,UACd,MAAA,EAAQ,MAAA;AAAA,UACR,MAAA,EAAQ,aAAa,aAAA,GAAgB,SAAA;AAAA,UACrC,UAAA,EAAY,WAAW,MAAA,GAAS,aAAA;AAAA,UAChC,KAAA,EAAO,WAAW,SAAA,GAAY,YAAA;AAAA,UAC9B,UAAA,EAAY,SAAA;AAAA,UACZ,UAAA,EAAY,KAAA;AAAA,UACZ,UAAU,UAAA,CAAW,QAAA;AAAA,UACrB,UAAA,EAAY,KAAA;AAAA,UACZ,UAAA,EAAY,uDAAA;AAAA,UACZ,SAAA,EAAW,WAAW,4BAAA,GAA+B,MAAA;AAAA,UACrD,OAAA,EAAS,MAAA;AAAA,UACT,OAAA,EAAS,MAAA;AAAA,UACT,aAAA,EAAe,QAAA;AAAA,UACf,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB,QAAA;AAAA,UAChB,KAAK,UAAA,CAAW,GAAA;AAAA,UAChB,SAAA,EAAW;AAAA,SACf;AAEA,QAAA,uBACIC,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEG,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,KAAA;AAAA,YACL,eAAA,EAAe,QAAA;AAAA,YACf,QAAA,EAAU,UAAA;AAAA,YACV,SAAS,MAAM,CAAC,UAAA,IAAc,QAAA,CAAS,IAAI,KAAK,CAAA;AAAA,YAChD,KAAA,EAAO,SAAA;AAAA,YAEP,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAAC,UAAK,KAAA,EAAO,EAAC,YAAY,KAAA,EAAK,EAAI,cAAI,KAAA,EAAM,CAAA;AAAA,cAC5C,IAAI,WAAA,oBACDA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACG,KAAA,EAAO;AAAA,oBACH,UAAU,UAAA,CAAW,QAAA;AAAA,oBACrB,UAAA,EAAY,GAAA;AAAA,oBACZ,OAAA,EAAS,WAAW,IAAA,GAAO;AAAA,mBAC/B;AAAA,kBAEC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA;AACT;AAAA,WAAA;AAAA,UAlBC,MAAA,CAAO,IAAI,KAAK;AAAA,SAoBzB;AAAA,MAER,CAAC;AAAA;AAAA,GACL;AAER;;;;;"}

package/components/SegmentedControl/index.js

@@ -57,6 +57,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import useSeparator from '../../apps/mobile/src/Factory/useSeparator.js';
 import '../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';

package/components/SegmentedControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/SegmentedControl/index.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport type {ISegmentedControlProps} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport {useComponentDefaults} from \"../../hooks\";\nimport {useKitsTheme} from \"../../contexts/Theme\";\n\nconst SIZE_MAP = {\n    sm: {height: 30, fontSize: 11, px: 8, py: 4, descSize: 9.5, gap: 2},\n    md: {height: 36, fontSize: 12.5, px: 12, py: 6, descSize: 10.5, gap: 4},\n    lg: {height: 44, fontSize: 14, px: 16, py: 10, descSize: 11, gap: 4},\n} as const;\n\nexport function SegmentedControl<V extends string | number = string>(rawProps: ISegmentedControlProps<V>) {\n    const {mergedProps: props, themeStyle} = useComponentDefaults<ISegmentedControlProps<V>>(\n        \"SegmentedControl\",\n        rawProps as any,\n    );\n\n    const {\n        options,\n        value,\n        onChange,\n        size = \"md\",\n        fullWidth = true,\n        disabled,\n        id,\n        testID,\n        ...rest\n    } = props;\n\n    const {cssProps, nativeProps} = useSeparator<HTMLDivElement>(rest as any);\n    const {resolveToken} = useKitsTheme();\n    const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;\n\n    const trackBg = resolveToken(\"surface-ground\");\n    const borderColor = resolveToken(\"surface-border\");\n    const inactiveText = resolveToken(\"text-secondary\");\n\n    const containerCss = useMemo(\n        () => ({\n            ...themeStyle,\n            ...cssProps,\n            display: \"inline-flex\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            gap: 2,\n            padding: 2,\n            backgroundColor: trackBg,\n            border: `1px solid ${borderColor}`,\n            borderRadius: 8,\n            ...(fullWidth ? {width: \"100%\"} : {}),\n            ...(disabled ? {opacity: \"0.55\", pointerEvents: \"none\" as const} : {}),\n        }),\n        [themeStyle, cssProps, trackBg, borderColor, fullWidth, disabled],\n    );\n\n    return (\n        <ResponsiveElement\n            as=\"Box\"\n            //@ts-ignore\n            cssProps={containerCss}\n            nativeProps={{...nativeProps, id, \"data-testid\": testID, role: \"tablist\"}}\n            additionalStyles={{}}\n        >\n            {options.map(opt => {\n                const selected = opt.value === value;\n                const isDisabled = disabled || opt.disabled;\n                const accent = opt.color ? resolveToken(opt.color) : resolveToken(\"primary\");\n\n                const buttonCss = {\n                    flex: fullWidth ? 1 : undefined,\n                    minHeight: sizeConfig.height,\n                    paddingLeft: sizeConfig.px,\n                    paddingRight: sizeConfig.px,\n                    paddingTop: sizeConfig.py,\n                    paddingBottom: sizeConfig.py,\n                    borderRadius: 6,\n                    border: \"none\",\n                    cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n                    background: selected ? accent : \"transparent\",\n                    color: selected ? \"#FFFFFF\" : inactiveText,\n                    fontFamily: \"inherit\",\n                    fontWeight: \"700\",\n                    fontSize: sizeConfig.fontSize,\n                    lineHeight: \"1.1\",\n                    transition: \"background-color 0.15s, color 0.15s, box-shadow 0.15s\",\n                    boxShadow: selected ? \"0 1px 2px rgba(0,0,0,0.06)\" : \"none\",\n                    outline: \"none\",\n                    display: \"flex\",\n                    flexDirection: \"column\" as const,\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: sizeConfig.gap,\n                    textAlign: \"center\" as const,\n                };\n\n                return (\n                    <button\n                        key={String(opt.value)}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={selected}\n                        disabled={isDisabled}\n                        onClick={() => !isDisabled && onChange(opt.value)}\n                        style={buttonCss as any}\n                    >\n                        <span style={{lineHeight: \"1.1\"}}>{opt.label}</span>\n                        {opt.description && (\n                            <span\n                                style={{\n                                    fontSize: sizeConfig.descSize,\n                                    fontWeight: 600,\n                                    opacity: selected ? 0.85 : 0.7,\n                                }}\n                            >\n                                {opt.description}\n                            </span>\n                        )}\n                    </button>\n                );\n            })}\n        </ResponsiveElement>\n    );\n}\n\nexport default SegmentedControl;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/SegmentedControl/index.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport type {ISegmentedControlProps} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport {useComponentDefaults} from \"../../hooks\";\nimport {useKitsTheme} from \"../../contexts/Theme\";\n\nconst SIZE_MAP = {\n    sm: {height: 30, fontSize: 11, px: 8, py: 4, descSize: 9.5, gap: 2},\n    md: {height: 36, fontSize: 12.5, px: 12, py: 6, descSize: 10.5, gap: 4},\n    lg: {height: 44, fontSize: 14, px: 16, py: 10, descSize: 11, gap: 4},\n} as const;\n\nexport function SegmentedControl<V extends string | number = string>(rawProps: ISegmentedControlProps<V>) {\n    const {mergedProps: props, themeStyle} = useComponentDefaults<ISegmentedControlProps<V>>(\n        \"SegmentedControl\",\n        rawProps as any,\n    );\n\n    const {\n        options,\n        value,\n        onChange,\n        size = \"md\",\n        fullWidth = true,\n        disabled,\n        id,\n        testID,\n        ...rest\n    } = props;\n\n    const {cssProps, nativeProps} = useSeparator<HTMLDivElement>(rest as any);\n    const {resolveToken} = useKitsTheme();\n    const sizeConfig = SIZE_MAP[size] ?? SIZE_MAP.md;\n\n    const trackBg = resolveToken(\"surface-ground\");\n    const borderColor = resolveToken(\"surface-border\");\n    const inactiveText = resolveToken(\"text-secondary\");\n\n    const containerCss = useMemo(\n        () => ({\n            ...themeStyle,\n            ...cssProps,\n            display: \"inline-flex\" as const,\n            flexDirection: \"row\" as const,\n            alignItems: \"stretch\" as const,\n            gap: 2,\n            padding: 2,\n            backgroundColor: trackBg,\n            border: `1px solid ${borderColor}`,\n            borderRadius: 8,\n            ...(fullWidth ? {width: \"100%\"} : {}),\n            ...(disabled ? {opacity: \"0.55\", pointerEvents: \"none\" as const} : {}),\n        }),\n        [themeStyle, cssProps, trackBg, borderColor, fullWidth, disabled],\n    );\n\n    return (\n        <ResponsiveElement\n            as=\"Box\"\n            //@ts-ignore\n            cssProps={containerCss}\n            nativeProps={{...nativeProps, id, \"data-testid\": testID, role: \"tablist\"}}\n            additionalStyles={{}}\n        >\n            {options.map(opt => {\n                const selected = opt.value === value;\n                const isDisabled = disabled || opt.disabled;\n                const accent = opt.color ? resolveToken(opt.color) : resolveToken(\"primary\");\n\n                const buttonCss = {\n                    flex: fullWidth ? 1 : undefined,\n                    minHeight: sizeConfig.height,\n                    paddingLeft: sizeConfig.px,\n                    paddingRight: sizeConfig.px,\n                    paddingTop: sizeConfig.py,\n                    paddingBottom: sizeConfig.py,\n                    borderRadius: 6,\n                    border: \"none\",\n                    cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n                    background: selected ? accent : \"transparent\",\n                    color: selected ? \"#FFFFFF\" : inactiveText,\n                    fontFamily: \"inherit\",\n                    fontWeight: \"700\",\n                    fontSize: sizeConfig.fontSize,\n                    lineHeight: \"1.1\",\n                    transition: \"background-color 0.15s, color 0.15s, box-shadow 0.15s\",\n                    boxShadow: selected ? \"0 1px 2px rgba(0,0,0,0.06)\" : \"none\",\n                    outline: \"none\",\n                    display: \"flex\",\n                    flexDirection: \"column\" as const,\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: sizeConfig.gap,\n                    textAlign: \"center\" as const,\n                };\n\n                return (\n                    <button\n                        key={String(opt.value)}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={selected}\n                        disabled={isDisabled}\n                        onClick={() => !isDisabled && onChange(opt.value)}\n                        style={buttonCss as any}\n                    >\n                        <span style={{lineHeight: \"1.1\"}}>{opt.label}</span>\n                        {opt.description && (\n                            <span\n                                style={{\n                                    fontSize: sizeConfig.descSize,\n                                    fontWeight: 600,\n                                    opacity: selected ? 0.85 : 0.7,\n                                }}\n                            >\n                                {opt.description}\n                            </span>\n                        )}\n                    </button>\n                );\n            })}\n        </ResponsiveElement>\n    );\n}\n\nexport default SegmentedControl;\n"],"names":[],"mappings":"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"}

package/components/SkeletonText/index.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');
 require('react-i18next');

package/components/SkeletonText/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/SkeletonText/index.native.tsx"],"sourcesContent":["import React from 'react';\nimport {SkeletonText as GSkeletonText} from '@lmb-it/kitsconcertomobile';\nimport type {ISkeletonText} from \"@lmb-it/kitsconcerto-types\";\n\nconst Skeleton: React.FC<ISkeletonText> = ({\n                                               lines = 3,\n                                               gap = 1,\n                                               startColor,\n                                               isLoaded,\n                                               speed,\n                                               animation,\n                                               ...props\n                                           }) => {\n\n    return (\n        <GSkeletonText\n            _lines={lines}\n            gap={gap}\n            startColor={startColor ?? 'bg-background-200'}\n            speed={speed}\n            isLoaded={isLoaded}\n            className=\"h-3\"\n        />\n    );\n};\n\nexport default Skeleton;\n"],"names":["jsx","GSkeletonText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAoC,CAAC;AAAA,EACI,KAAA,GAAQ,CAAA;AAAA,EACR,GAAA,GAAM,CAAA;AAAA,EACN,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACP,CAAA,KAAM;AAE7C,EAAA,uBACIA,cAAA;AAAA,IAACC,kBAAA;AAAA,IAAA;AAAA,MACG,MAAA,EAAQ,KAAA;AAAA,MACR,GAAA;AAAA,MACA,YAAY,UAAA,IAAc,mBAAA;AAAA,MAC1B,KAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,EAAU;AAAA;AAAA,GACd;AAER;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SkeletonText/index.native.tsx"],"sourcesContent":["import React from 'react';\nimport {SkeletonText as GSkeletonText} from '@lmb-it/kitsconcertomobile';\nimport type {ISkeletonText} from \"@lmb-it/kitsconcerto-types\";\n\nconst Skeleton: React.FC<ISkeletonText> = ({\n                                               lines = 3,\n                                               gap = 1,\n                                               startColor,\n                                               isLoaded,\n                                               speed,\n                                               animation,\n                                               ...props\n                                           }) => {\n\n    return (\n        <GSkeletonText\n            _lines={lines}\n            gap={gap}\n            startColor={startColor ?? 'bg-background-200'}\n            speed={speed}\n            isLoaded={isLoaded}\n            className=\"h-3\"\n        />\n    );\n};\n\nexport default Skeleton;\n"],"names":["jsx","GSkeletonText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAoC,CAAC;AAAA,EACI,KAAA,GAAQ,CAAA;AAAA,EACR,GAAA,GAAM,CAAA;AAAA,EACN,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACP,CAAA,KAAM;AAE7C,EAAA,uBACIA,cAAA;AAAA,IAACC,kBAAA;AAAA,IAAA;AAAA,MACG,MAAA,EAAQ,KAAA;AAAA,MACR,GAAA;AAAA,MACA,YAAY,UAAA,IAAc,mBAAA;AAAA,MAC1B,KAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,EAAU;AAAA;AAAA,GACd;AAER;;;;"}