@lmb-it/kitsconcerto-native 0.1.242 → 0.1.244

package/components/SkeletonText/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 '../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';
 import 'react-i18next';

package/components/SkeletonText/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":["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,uBACI,GAAA;AAAA,IAACA,YAAA;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.js","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":["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,uBACI,GAAA;AAAA,IAACA,YAAA;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;;;;"}

package/components/Tabs/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');
@@ -93,14 +95,39 @@ const SIZE = {
 };
 function Tabs(rawProps) {
   const props = useComponentDefaults.default("Tabs", rawProps).mergedProps;
-  const { items, value, onChange, size = "md", activeColor = "brand", scrollable = true, gap = 8, testID } = props;
+  const {
+    items,
+    value,
+    onChange,
+    size = "md",
+    activeColor = "brand",
+    scrollable = true,
+    gap = 8,
+    testID,
+    countVariant = "suffix",
+    activeBadgeBackground = "surface-card",
+    activeBadgeTextColor = "text-primary",
+    inactiveBadgeBackground = "gray.200",
+    inactiveBadgeTextColor = "text-secondary",
+    inactiveBackground = "gray.100",
+    inactiveTextColor = "text-secondary",
+    sizeHeights
+  } = props;
   const cfg = SIZE[size] ?? SIZE.md;
+  const heights = { sm: SIZE.sm.h, md: SIZE.md.h, lg: SIZE.lg.h, ...sizeHeights };
+  const height = heights[size] ?? heights.md;
   const activeBg = style.resolveThemeTokenForNative(activeColor);
-  const inactiveBg = style.resolveThemeTokenForNative("gray.100");
-  const inactiveText = style.resolveThemeTokenForNative("text-secondary");
+  const inactiveBg = style.resolveThemeTokenForNative(inactiveBackground);
+  const inactiveText = style.resolveThemeTokenForNative(inactiveTextColor);
+  const badge = countVariant === "badge";
+  const activeBadgeBg = style.resolveThemeTokenForNative(activeBadgeBackground);
+  const activeBadgeFg = style.resolveThemeTokenForNative(activeBadgeTextColor);
+  const inactiveBadgeBg = style.resolveThemeTokenForNative(inactiveBadgeBackground);
+  const inactiveBadgeFg = style.resolveThemeTokenForNative(inactiveBadgeTextColor);
+  const badgeH = cfg.fs + 7;
   const renderChip = (item) => {
     const active = item.key === value;
-    const label = item.count != null ? `${item.label}  ${item.count}` : item.label;
+    const label = !badge && item.count != null ? `${item.label}  ${item.count}` : item.label;
     const fg = active ? "#FFFFFF" : inactiveText;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.TouchableOpacity,
@@ -111,7 +138,7 @@ function Tabs(rawProps) {
         accessibilityRole: "button",
         accessibilityState: { selected: active },
         style: {
-          height: cfg.h,
+          height,
           borderRadius: 999,
           paddingHorizontal: cfg.px,
           flexDirection: "row",
@@ -123,7 +150,22 @@ function Tabs(rawProps) {
         },
         children: [
           item.icon != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.Icon, { name: item.icon, size: cfg.fs + 1, color: fg }),
-          /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: cfg.fs, fontWeight: "600", color: fg, children: label })
+          /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: cfg.fs, fontWeight: "600", color: fg, children: label }),
+          badge && item.count != null && /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: {
+                height: badgeH,
+                minWidth: badgeH,
+                borderRadius: 999,
+                paddingHorizontal: 6,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: active ? activeBadgeBg : inactiveBadgeBg
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(index_native$1.default, { fontSize: cfg.fs - 2, fontWeight: "600", color: active ? activeBadgeFg : inactiveBadgeFg, children: item.count })
+            }
+          )
         ]
       },
       item.key

package/components/Tabs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Tabs/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {ScrollView, TouchableOpacity, View} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {ITabsProps, ITabItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's FilterChips (App/src/components/shared/FilterChips).\nconst SIZE = {\n    sm: {h: 28, px: 12, fs: 12},\n    md: {h: 32, px: 14, fs: 13},\n    lg: {h: 40, px: 18, fs: 15},\n} as const;\n\n/**\n * Tabs (native) — horizontally-scrollable selectable filter row.\n *\n * Built like the app's working `FilterChips`: a RN horizontal `ScrollView` of\n * `TouchableOpacity` pills + the library `Text`. Active = filled `activeColor`;\n * inactive = neutral tint. Colours resolve via the standalone token resolver.\n */\nexport function Tabs<K extends string = string>(rawProps: ITabsProps<K>) {\n    const props = useComponentDefaults<ITabsProps<K>>(\"Tabs\", rawProps).mergedProps;\n    const {items, value, onChange, size = \"md\", activeColor = \"brand\", scrollable = true, gap = 8, testID} = props;\n\n    const cfg = SIZE[size] ?? SIZE.md;\n    const activeBg = resolveThemeTokenForNative(activeColor);\n    const inactiveBg = resolveThemeTokenForNative(\"gray.100\");\n    const inactiveText = resolveThemeTokenForNative(\"text-secondary\");\n\n    const renderChip = (item: ITabItem<K>) => {\n        const active = item.key === value;\n        const label = item.count != null ? `${item.label}  ${item.count}` : item.label;\n        const fg = active ? \"#FFFFFF\" : inactiveText;\n        return (\n            <TouchableOpacity\n                key={item.key}\n                activeOpacity={0.75}\n                disabled={item.disabled}\n                onPress={() => onChange(item.key)}\n                accessibilityRole=\"button\"\n                accessibilityState={{selected: active}}\n                style={{\n                    height: cfg.h,\n                    borderRadius: 999,\n                    paddingHorizontal: cfg.px,\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: 6,\n                    backgroundColor: active ? activeBg : inactiveBg,\n                    opacity: item.disabled ? 0.5 : 1,\n                }}\n            >\n                {item.icon != null && <Icon name={item.icon as never} size={cfg.fs + 1} color={fg} />}\n                <Text fontSize={cfg.fs} fontWeight=\"600\" color={fg}>\n                    {label}\n                </Text>\n            </TouchableOpacity>\n        );\n    };\n\n    if (!scrollable) {\n        return (\n            <View style={{flexDirection: \"row\", flexWrap: \"wrap\", alignItems: \"center\", gap}} testID={testID}>\n                {items.map(renderChip)}\n            </View>\n        );\n    }\n\n    return (\n        <ScrollView\n            horizontal\n            showsHorizontalScrollIndicator={false}\n            keyboardShouldPersistTaps=\"handled\"\n            contentContainerStyle={{flexDirection: \"row\", alignItems: \"center\", gap, paddingVertical: 4}}\n            testID={testID}\n        >\n            {items.map(renderChip)}\n        </ScrollView>\n    );\n}\n\nexport default Tabs;\n"],"names":["useComponentDefaults","resolveThemeTokenForNative","jsxs","TouchableOpacity","jsx","Icon","Text","View","ScrollView"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Tabs/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {ScrollView, TouchableOpacity, View} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {ITabsProps, ITabItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's FilterChips (App/src/components/shared/FilterChips).\nconst SIZE = {\n    sm: {h: 28, px: 12, fs: 12},\n    md: {h: 32, px: 14, fs: 13},\n    lg: {h: 40, px: 18, fs: 15},\n} as const;\n\n/**\n * Tabs (native) — horizontally-scrollable selectable filter row.\n *\n * Built like the app's working `FilterChips`: a RN horizontal `ScrollView` of\n * `TouchableOpacity` pills + the library `Text`. Active = filled `activeColor`;\n * inactive = neutral tint. Colours resolve via the standalone token resolver.\n */\nexport function Tabs<K extends string = string>(rawProps: ITabsProps<K>) {\n    const props = useComponentDefaults<ITabsProps<K>>(\"Tabs\", rawProps).mergedProps;\n    const {\n        items, value, onChange, size = \"md\", activeColor = \"brand\", scrollable = true, gap = 8, testID,\n        countVariant = \"suffix\",\n        activeBadgeBackground = \"surface-card\",\n        activeBadgeTextColor = \"text-primary\",\n        inactiveBadgeBackground = \"gray.200\",\n        inactiveBadgeTextColor = \"text-secondary\",\n        inactiveBackground = \"gray.100\",\n        inactiveTextColor = \"text-secondary\",\n        sizeHeights,\n    } = props;\n\n    const cfg = SIZE[size] ?? SIZE.md;\n    const heights = {sm: SIZE.sm.h, md: SIZE.md.h, lg: SIZE.lg.h, ...sizeHeights};\n    const height = heights[size] ?? heights.md;\n    const activeBg = resolveThemeTokenForNative(activeColor);\n    const inactiveBg = resolveThemeTokenForNative(inactiveBackground);\n    const inactiveText = resolveThemeTokenForNative(inactiveTextColor);\n    const badge = countVariant === \"badge\";\n    const activeBadgeBg = resolveThemeTokenForNative(activeBadgeBackground);\n    const activeBadgeFg = resolveThemeTokenForNative(activeBadgeTextColor);\n    const inactiveBadgeBg = resolveThemeTokenForNative(inactiveBadgeBackground);\n    const inactiveBadgeFg = resolveThemeTokenForNative(inactiveBadgeTextColor);\n    const badgeH = cfg.fs + 7;\n\n    const renderChip = (item: ITabItem<K>) => {\n        const active = item.key === value;\n        const label = !badge && item.count != null ? `${item.label}  ${item.count}` : item.label;\n        const fg = active ? \"#FFFFFF\" : inactiveText;\n        return (\n            <TouchableOpacity\n                key={item.key}\n                activeOpacity={0.75}\n                disabled={item.disabled}\n                onPress={() => onChange(item.key)}\n                accessibilityRole=\"button\"\n                accessibilityState={{selected: active}}\n                style={{\n                    height,\n                    borderRadius: 999,\n                    paddingHorizontal: cfg.px,\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: 6,\n                    backgroundColor: active ? activeBg : inactiveBg,\n                    opacity: item.disabled ? 0.5 : 1,\n                }}\n            >\n                {item.icon != null && <Icon name={item.icon as never} size={cfg.fs + 1} color={fg} />}\n                <Text fontSize={cfg.fs} fontWeight=\"600\" color={fg}>\n                    {label}\n                </Text>\n                {badge && item.count != null && (\n                    <View\n                        style={{\n                            height: badgeH,\n                            minWidth: badgeH,\n                            borderRadius: 999,\n                            paddingHorizontal: 6,\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            backgroundColor: active ? activeBadgeBg : inactiveBadgeBg,\n                        }}\n                    >\n                        <Text fontSize={cfg.fs - 2} fontWeight=\"600\" color={active ? activeBadgeFg : inactiveBadgeFg}>\n                            {item.count}\n                        </Text>\n                    </View>\n                )}\n            </TouchableOpacity>\n        );\n    };\n\n    if (!scrollable) {\n        return (\n            <View style={{flexDirection: \"row\", flexWrap: \"wrap\", alignItems: \"center\", gap}} testID={testID}>\n                {items.map(renderChip)}\n            </View>\n        );\n    }\n\n    return (\n        <ScrollView\n            horizontal\n            showsHorizontalScrollIndicator={false}\n            keyboardShouldPersistTaps=\"handled\"\n            contentContainerStyle={{flexDirection: \"row\", alignItems: \"center\", gap, paddingVertical: 4}}\n            testID={testID}\n        >\n            {items.map(renderChip)}\n        </ScrollView>\n    );\n}\n\nexport default Tabs;\n"],"names":["useComponentDefaults","resolveThemeTokenForNative","jsxs","TouchableOpacity","jsx","Icon","Text","View","ScrollView"],"mappings":"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"}

package/components/Tabs/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';
@@ -91,14 +93,39 @@ const SIZE = {
 };
 function Tabs(rawProps) {
   const props = useComponentDefaults("Tabs", rawProps).mergedProps;
-  const { items, value, onChange, size = "md", activeColor = "brand", scrollable = true, gap = 8, testID } = props;
+  const {
+    items,
+    value,
+    onChange,
+    size = "md",
+    activeColor = "brand",
+    scrollable = true,
+    gap = 8,
+    testID,
+    countVariant = "suffix",
+    activeBadgeBackground = "surface-card",
+    activeBadgeTextColor = "text-primary",
+    inactiveBadgeBackground = "gray.200",
+    inactiveBadgeTextColor = "text-secondary",
+    inactiveBackground = "gray.100",
+    inactiveTextColor = "text-secondary",
+    sizeHeights
+  } = props;
   const cfg = SIZE[size] ?? SIZE.md;
+  const heights = { sm: SIZE.sm.h, md: SIZE.md.h, lg: SIZE.lg.h, ...sizeHeights };
+  const height = heights[size] ?? heights.md;
   const activeBg = resolveThemeTokenForNative(activeColor);
-  const inactiveBg = resolveThemeTokenForNative("gray.100");
-  const inactiveText = resolveThemeTokenForNative("text-secondary");
+  const inactiveBg = resolveThemeTokenForNative(inactiveBackground);
+  const inactiveText = resolveThemeTokenForNative(inactiveTextColor);
+  const badge = countVariant === "badge";
+  const activeBadgeBg = resolveThemeTokenForNative(activeBadgeBackground);
+  const activeBadgeFg = resolveThemeTokenForNative(activeBadgeTextColor);
+  const inactiveBadgeBg = resolveThemeTokenForNative(inactiveBadgeBackground);
+  const inactiveBadgeFg = resolveThemeTokenForNative(inactiveBadgeTextColor);
+  const badgeH = cfg.fs + 7;
   const renderChip = (item) => {
     const active = item.key === value;
-    const label = item.count != null ? `${item.label}  ${item.count}` : item.label;
+    const label = !badge && item.count != null ? `${item.label}  ${item.count}` : item.label;
     const fg = active ? "#FFFFFF" : inactiveText;
     return /* @__PURE__ */ jsxs(
       TouchableOpacity,
@@ -109,7 +136,7 @@ function Tabs(rawProps) {
         accessibilityRole: "button",
         accessibilityState: { selected: active },
         style: {
-          height: cfg.h,
+          height,
           borderRadius: 999,
           paddingHorizontal: cfg.px,
           flexDirection: "row",
@@ -121,7 +148,22 @@ function Tabs(rawProps) {
         },
         children: [
           item.icon != null && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: cfg.fs + 1, color: fg }),
-          /* @__PURE__ */ jsx(Text, { fontSize: cfg.fs, fontWeight: "600", color: fg, children: label })
+          /* @__PURE__ */ jsx(Text, { fontSize: cfg.fs, fontWeight: "600", color: fg, children: label }),
+          badge && item.count != null && /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                height: badgeH,
+                minWidth: badgeH,
+                borderRadius: 999,
+                paddingHorizontal: 6,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: active ? activeBadgeBg : inactiveBadgeBg
+              },
+              children: /* @__PURE__ */ jsx(Text, { fontSize: cfg.fs - 2, fontWeight: "600", color: active ? activeBadgeFg : inactiveBadgeFg, children: item.count })
+            }
+          )
         ]
       },
       item.key

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Tabs/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {ScrollView, TouchableOpacity, View} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {ITabsProps, ITabItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's FilterChips (App/src/components/shared/FilterChips).\nconst SIZE = {\n    sm: {h: 28, px: 12, fs: 12},\n    md: {h: 32, px: 14, fs: 13},\n    lg: {h: 40, px: 18, fs: 15},\n} as const;\n\n/**\n * Tabs (native) — horizontally-scrollable selectable filter row.\n *\n * Built like the app's working `FilterChips`: a RN horizontal `ScrollView` of\n * `TouchableOpacity` pills + the library `Text`. Active = filled `activeColor`;\n * inactive = neutral tint. Colours resolve via the standalone token resolver.\n */\nexport function Tabs<K extends string = string>(rawProps: ITabsProps<K>) {\n    const props = useComponentDefaults<ITabsProps<K>>(\"Tabs\", rawProps).mergedProps;\n    const {items, value, onChange, size = \"md\", activeColor = \"brand\", scrollable = true, gap = 8, testID} = props;\n\n    const cfg = SIZE[size] ?? SIZE.md;\n    const activeBg = resolveThemeTokenForNative(activeColor);\n    const inactiveBg = resolveThemeTokenForNative(\"gray.100\");\n    const inactiveText = resolveThemeTokenForNative(\"text-secondary\");\n\n    const renderChip = (item: ITabItem<K>) => {\n        const active = item.key === value;\n        const label = item.count != null ? `${item.label}  ${item.count}` : item.label;\n        const fg = active ? \"#FFFFFF\" : inactiveText;\n        return (\n            <TouchableOpacity\n                key={item.key}\n                activeOpacity={0.75}\n                disabled={item.disabled}\n                onPress={() => onChange(item.key)}\n                accessibilityRole=\"button\"\n                accessibilityState={{selected: active}}\n                style={{\n                    height: cfg.h,\n                    borderRadius: 999,\n                    paddingHorizontal: cfg.px,\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: 6,\n                    backgroundColor: active ? activeBg : inactiveBg,\n                    opacity: item.disabled ? 0.5 : 1,\n                }}\n            >\n                {item.icon != null && <Icon name={item.icon as never} size={cfg.fs + 1} color={fg} />}\n                <Text fontSize={cfg.fs} fontWeight=\"600\" color={fg}>\n                    {label}\n                </Text>\n            </TouchableOpacity>\n        );\n    };\n\n    if (!scrollable) {\n        return (\n            <View style={{flexDirection: \"row\", flexWrap: \"wrap\", alignItems: \"center\", gap}} testID={testID}>\n                {items.map(renderChip)}\n            </View>\n        );\n    }\n\n    return (\n        <ScrollView\n            horizontal\n            showsHorizontalScrollIndicator={false}\n            keyboardShouldPersistTaps=\"handled\"\n            contentContainerStyle={{flexDirection: \"row\", alignItems: \"center\", gap, paddingVertical: 4}}\n            testID={testID}\n        >\n            {items.map(renderChip)}\n        </ScrollView>\n    );\n}\n\nexport default Tabs;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Tabs/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport {ScrollView, TouchableOpacity, View} from \"react-native\";\nimport {resolveThemeTokenForNative} from \"@lmb-it/kitsconcertomobile\";\nimport type {ITabsProps, ITabItem} from \"@lmb-it/kitsconcerto-types\";\nimport {Text, Icon} from \"../../primitives\";\nimport {useComponentDefaults} from \"../../hooks\";\n\n// Mirrors the app's FilterChips (App/src/components/shared/FilterChips).\nconst SIZE = {\n    sm: {h: 28, px: 12, fs: 12},\n    md: {h: 32, px: 14, fs: 13},\n    lg: {h: 40, px: 18, fs: 15},\n} as const;\n\n/**\n * Tabs (native) — horizontally-scrollable selectable filter row.\n *\n * Built like the app's working `FilterChips`: a RN horizontal `ScrollView` of\n * `TouchableOpacity` pills + the library `Text`. Active = filled `activeColor`;\n * inactive = neutral tint. Colours resolve via the standalone token resolver.\n */\nexport function Tabs<K extends string = string>(rawProps: ITabsProps<K>) {\n    const props = useComponentDefaults<ITabsProps<K>>(\"Tabs\", rawProps).mergedProps;\n    const {\n        items, value, onChange, size = \"md\", activeColor = \"brand\", scrollable = true, gap = 8, testID,\n        countVariant = \"suffix\",\n        activeBadgeBackground = \"surface-card\",\n        activeBadgeTextColor = \"text-primary\",\n        inactiveBadgeBackground = \"gray.200\",\n        inactiveBadgeTextColor = \"text-secondary\",\n        inactiveBackground = \"gray.100\",\n        inactiveTextColor = \"text-secondary\",\n        sizeHeights,\n    } = props;\n\n    const cfg = SIZE[size] ?? SIZE.md;\n    const heights = {sm: SIZE.sm.h, md: SIZE.md.h, lg: SIZE.lg.h, ...sizeHeights};\n    const height = heights[size] ?? heights.md;\n    const activeBg = resolveThemeTokenForNative(activeColor);\n    const inactiveBg = resolveThemeTokenForNative(inactiveBackground);\n    const inactiveText = resolveThemeTokenForNative(inactiveTextColor);\n    const badge = countVariant === \"badge\";\n    const activeBadgeBg = resolveThemeTokenForNative(activeBadgeBackground);\n    const activeBadgeFg = resolveThemeTokenForNative(activeBadgeTextColor);\n    const inactiveBadgeBg = resolveThemeTokenForNative(inactiveBadgeBackground);\n    const inactiveBadgeFg = resolveThemeTokenForNative(inactiveBadgeTextColor);\n    const badgeH = cfg.fs + 7;\n\n    const renderChip = (item: ITabItem<K>) => {\n        const active = item.key === value;\n        const label = !badge && item.count != null ? `${item.label}  ${item.count}` : item.label;\n        const fg = active ? \"#FFFFFF\" : inactiveText;\n        return (\n            <TouchableOpacity\n                key={item.key}\n                activeOpacity={0.75}\n                disabled={item.disabled}\n                onPress={() => onChange(item.key)}\n                accessibilityRole=\"button\"\n                accessibilityState={{selected: active}}\n                style={{\n                    height,\n                    borderRadius: 999,\n                    paddingHorizontal: cfg.px,\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: 6,\n                    backgroundColor: active ? activeBg : inactiveBg,\n                    opacity: item.disabled ? 0.5 : 1,\n                }}\n            >\n                {item.icon != null && <Icon name={item.icon as never} size={cfg.fs + 1} color={fg} />}\n                <Text fontSize={cfg.fs} fontWeight=\"600\" color={fg}>\n                    {label}\n                </Text>\n                {badge && item.count != null && (\n                    <View\n                        style={{\n                            height: badgeH,\n                            minWidth: badgeH,\n                            borderRadius: 999,\n                            paddingHorizontal: 6,\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            backgroundColor: active ? activeBadgeBg : inactiveBadgeBg,\n                        }}\n                    >\n                        <Text fontSize={cfg.fs - 2} fontWeight=\"600\" color={active ? activeBadgeFg : inactiveBadgeFg}>\n                            {item.count}\n                        </Text>\n                    </View>\n                )}\n            </TouchableOpacity>\n        );\n    };\n\n    if (!scrollable) {\n        return (\n            <View style={{flexDirection: \"row\", flexWrap: \"wrap\", alignItems: \"center\", gap}} testID={testID}>\n                {items.map(renderChip)}\n            </View>\n        );\n    }\n\n    return (\n        <ScrollView\n            horizontal\n            showsHorizontalScrollIndicator={false}\n            keyboardShouldPersistTaps=\"handled\"\n            contentContainerStyle={{flexDirection: \"row\", alignItems: \"center\", gap, paddingVertical: 4}}\n            testID={testID}\n        >\n            {items.map(renderChip)}\n        </ScrollView>\n    );\n}\n\nexport default Tabs;\n"],"names":[],"mappings":"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"}

package/components/overlay/ConfirmDialog/index.cjs

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactNative = require('react-native');
 var Animated = require('react-native-reanimated');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var useSeverityColors = require('../../../hooks/useSeverityColors.cjs');
-require('react');
 require('../../../contexts/DialogContext.cjs');
 var useResolvedStyle = require('../../../hooks/useResolvedStyle.cjs');
 var index = require('../../../animations/index.cjs');
@@ -15,6 +15,18 @@ var KitsThemeProvider_native = require('../../../contexts/Theme/KitsThemeProvide
 var index_native = require('../../../primitives/Text/index.cjs');
 var index_native$1 = require('../../../primitives/Icon/index.cjs');
 
+function useOverlayPresence(visible) {
+  const [mounted, setMounted] = React.useState(visible);
+  const visibleRef = React.useRef(visible);
+  React.useEffect(() => {
+    visibleRef.current = visible;
+    if (visible) setMounted(true);
+  }, [visible]);
+  const handleExitFinished = React.useCallback(() => {
+    if (!visibleRef.current) setMounted(false);
+  }, []);
+  return { mounted, handleExitFinished };
+}
 function KitsConfirm(props) {
   const {
     visible,
@@ -52,12 +64,14 @@ function KitsConfirm(props) {
   const textColor = resolveToken("text");
   const subtextColor = resolveToken("gray.500");
   const grabberColor = resolveToken("gray.300");
+  const scrimColor = resolveToken("black-alpha-40");
   const brandLogo = type === "brand" ? theme.config.logo : null;
   const resolvedStyle = useResolvedStyle.default(style || {});
   const resolvedContentStyle = useResolvedStyle.default(contentStyle || {});
   const resolvedHeaderStyle = useResolvedStyle.default(headerStyle || {});
   const resolvedMaskStyle = useResolvedStyle.default(maskStyle || {});
-  if (!visible) return null;
+  const { mounted, handleExitFinished } = useOverlayPresence(!!visible);
+  if (!mounted) return null;
   const isSheet = position === "bottom";
   const hide = () => onHide?.("hide");
   const doClick = async (callback) => {
@@ -125,108 +139,145 @@ function KitsConfirm(props) {
     ] }) });
   };
   if (isSheet) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: /* @__PURE__ */ jsxRuntime.jsxs(Animated.View, { entering: Animated.FadeIn.duration(index.overlayAnimations.scrim.enterDuration), style: [styles.sheetOverlay, resolvedMaskStyle], children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: reactNative.StyleSheet.absoluteFill, onPress: hide }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Animated.View,
-        {
-          entering: Animated.SlideInDown.springify().damping(index.overlayAnimations.sheet.enter.damping).stiffness(index.overlayAnimations.sheet.enter.stiffness),
-          style: [
-            styles.sheetPanel,
-            { backgroundColor: panelBg, paddingBottom: 24 + insets.bottom },
-            resolvedStyle,
-            resolvedContentStyle
-          ],
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
-            header != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: [styles.sheetHeader, { color: textColor }, resolvedHeaderStyle], children: header }),
-            message != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: [styles.sheetMessage, { color: subtextColor }], children: message }),
-            children,
-            renderActions(true)
-          ]
-        }
-      )
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: visible && /* @__PURE__ */ jsxRuntime.jsxs(
+      Animated.View,
+      {
+        entering: Animated.FadeIn.duration(index.overlayAnimations.scrim.enterDuration),
+        exiting: Animated.FadeOut.duration(index.overlayAnimations.scrim.exitDuration),
+        style: [styles.sheetOverlay, { backgroundColor: scrimColor }, resolvedMaskStyle],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: reactNative.StyleSheet.absoluteFill, onPress: hide }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Animated.View,
+            {
+              entering: Animated.SlideInDown.springify().damping(index.overlayAnimations.sheet.enter.damping).stiffness(index.overlayAnimations.sheet.enter.stiffness).mass(index.overlayAnimations.sheet.enter.mass),
+              exiting: Animated.SlideOutDown.duration(index.overlayAnimations.sheet.exitDuration).easing(Animated.Easing.in(Animated.Easing.ease)).withCallback((finished) => {
+                "worklet";
+                if (finished) Animated.runOnJS(handleExitFinished)();
+              }),
+              style: [
+                styles.sheetPanel,
+                { backgroundColor: panelBg, paddingBottom: 24 + insets.bottom },
+                resolvedStyle,
+                resolvedContentStyle
+              ],
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
+                header != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: [styles.sheetHeader, { color: textColor }, resolvedHeaderStyle], children: header }),
+                message != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: [styles.sheetMessage, { color: subtextColor }], children: message }),
+                children,
+                renderActions(true)
+              ]
+            }
+          )
+        ]
+      }
+    ) });
   }
   if (content) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: /* @__PURE__ */ jsxRuntime.jsxs(Animated.View, { entering: Animated.FadeIn.duration(index.overlayAnimations.scrim.enterDuration), style: [styles.overlay, resolvedMaskStyle], children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: reactNative.StyleSheet.absoluteFill, onPress: hide }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Animated.View,
-        {
-          entering: Animated.ZoomIn.springify().damping(index.overlayAnimations.confirm.content.damping).stiffness(index.overlayAnimations.confirm.content.stiffness),
-          style: [
-            styles.panel,
-            { backgroundColor: surfaceColor, minWidth: 250, maxWidth: 380 },
-            resolvedStyle,
-            resolvedContentStyle
-          ],
-          children: content
-        }
-      )
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: visible && /* @__PURE__ */ jsxRuntime.jsxs(
+      Animated.View,
+      {
+        entering: Animated.FadeIn.duration(index.overlayAnimations.scrim.enterDuration),
+        exiting: Animated.FadeOut.duration(index.overlayAnimations.scrim.exitDuration),
+        style: [styles.overlay, { backgroundColor: scrimColor }, resolvedMaskStyle],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: reactNative.StyleSheet.absoluteFill, onPress: hide }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Animated.View,
+            {
+              entering: Animated.ZoomIn.springify().damping(index.overlayAnimations.confirm.content.damping).stiffness(index.overlayAnimations.confirm.content.stiffness).mass(index.overlayAnimations.confirm.content.mass),
+              exiting: Animated.ZoomOut.duration(index.overlayAnimations.confirm.exitDuration).easing(Animated.Easing.in(Animated.Easing.ease)).withCallback((finished) => {
+                "worklet";
+                if (finished) Animated.runOnJS(handleExitFinished)();
+              }),
+              style: [
+                styles.panel,
+                { backgroundColor: surfaceColor, minWidth: 250, maxWidth: 380 },
+                resolvedStyle,
+                resolvedContentStyle
+              ],
+              children: content
+            }
+          )
+        ]
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: /* @__PURE__ */ jsxRuntime.jsxs(Animated.View, { entering: Animated.FadeIn.duration(index.overlayAnimations.scrim.enterDuration), style: [styles.overlay, resolvedMaskStyle], children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: reactNative.StyleSheet.absoluteFill, onPress: hide }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.cardStack, children: [
-      showIcon && /* @__PURE__ */ jsxRuntime.jsx(
-        Animated.View,
-        {
-          entering: Animated.ZoomIn.springify().damping(index.overlayAnimations.confirm.icon.damping).stiffness(index.overlayAnimations.confirm.icon.stiffness).delay(index.overlayAnimations.confirm.icon.delay),
-          style: [styles.iconBubble, { backgroundColor: colors.iconBg }],
-          children: brandLogo ? brandLogo : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index_native$1.Icon, { name: icon, size: "xl", color: colors.iconFg }) : icon
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Animated.View,
-        {
-          entering: Animated.ZoomIn.springify().damping(index.overlayAnimations.confirm.enter.damping).stiffness(index.overlayAnimations.confirm.enter.stiffness),
-          style: [
-            styles.panel,
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: hide, children: visible && /* @__PURE__ */ jsxRuntime.jsxs(
+    Animated.View,
+    {
+      entering: Animated.FadeIn.duration(index.overlayAnimations.scrim.enterDuration),
+      exiting: Animated.FadeOut.duration(index.overlayAnimations.scrim.exitDuration),
+      style: [styles.overlay, { backgroundColor: scrimColor }, resolvedMaskStyle],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: reactNative.StyleSheet.absoluteFill, onPress: hide }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.cardStack, children: [
+          showIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            Animated.View,
+            {
+              entering: Animated.ZoomIn.springify().damping(index.overlayAnimations.confirm.icon.damping).stiffness(index.overlayAnimations.confirm.icon.stiffness).mass(index.overlayAnimations.confirm.icon.mass).delay(index.overlayAnimations.confirm.icon.delay),
+              exiting: Animated.ZoomOut.duration(index.overlayAnimations.confirm.exitDuration).easing(Animated.Easing.in(Animated.Easing.ease)),
+              style: [styles.iconBubble, { backgroundColor: colors.iconBg }],
+              children: brandLogo ? brandLogo : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index_native$1.Icon, { name: icon, size: "xl", color: colors.iconFg }) : icon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Animated.View,
             {
-              backgroundColor: panelBg,
-              paddingTop: showIcon ? 48 : 24,
-              gap: 10
-            },
-            resolvedStyle,
-            resolvedContentStyle
-          ],
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: styles.closeBtn, onPress: hide, hitSlop: 12, children: /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: { fontSize: 18, color: subtextColor }, children: "\u2715" }) }),
-            header != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: [styles.header, { color: textColor }, resolvedHeaderStyle], children: header }),
-            message != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: [styles.message, { color: subtextColor }], children: message }),
-            children,
-            renderActions(false)
-          ]
-        }
-      )
-    ] })
-  ] }) });
+              entering: Animated.ZoomIn.springify().damping(index.overlayAnimations.confirm.enter.damping).stiffness(index.overlayAnimations.confirm.enter.stiffness).mass(index.overlayAnimations.confirm.enter.mass),
+              exiting: Animated.ZoomOut.duration(index.overlayAnimations.confirm.exitDuration).easing(Animated.Easing.in(Animated.Easing.ease)).withCallback((finished) => {
+                "worklet";
+                if (finished) Animated.runOnJS(handleExitFinished)();
+              }),
+              style: [
+                styles.panel,
+                {
+                  backgroundColor: panelBg,
+                  paddingTop: showIcon ? 48 : 24,
+                  gap: 10
+                },
+                resolvedStyle,
+                resolvedContentStyle
+              ],
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: styles.closeBtn, onPress: hide, hitSlop: 12, children: /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: { fontSize: 18, color: subtextColor }, children: "\u2715" }) }),
+                header != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: [styles.header, { color: textColor }, resolvedHeaderStyle], children: header }),
+                message != null && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: [styles.message, { color: subtextColor }], children: message }),
+                children,
+                renderActions(false)
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
 }
 const styles = reactNative.StyleSheet.create({
   overlay: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.55)",
     justifyContent: "center",
     alignItems: "center",
     padding: 28
   },
   sheetOverlay: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.55)",
     justifyContent: "flex-end"
   },
   sheetPanel: {
+    // 24 == radii.2xl, top corners only (bottom stays square).
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     paddingHorizontal: 24,
     paddingTop: 10,
     gap: 14,
-    elevation: 16,
+    // Subtle elevation (upward for a sheet): low opacity, wide blur, minimal offset.
+    elevation: 6,
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: -4 },
+    shadowOffset: { width: 0, height: -2 },
     shadowOpacity: 0.15,
-    shadowRadius: 16
+    shadowRadius: 20
   },
   grabber: {
     width: 40,
@@ -266,14 +317,16 @@ const styles = reactNative.StyleSheet.create({
   },
   panel: {
     alignSelf: "stretch",
-    borderRadius: 16,
+    // 20 == radii.xl. Side padding (24) == bottom padding (24) for even rhythm.
+    borderRadius: 20,
     paddingHorizontal: 24,
     paddingBottom: 24,
-    elevation: 16,
+    // Subtle elevation: low opacity, wide blur, minimal offset.
+    elevation: 6,
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.2,
-    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
     alignItems: "center"
   },
   closeBtn: {
@@ -292,7 +345,8 @@ const styles = reactNative.StyleSheet.create({
     fontSize: 14,
     textAlign: "center",
     lineHeight: 20,
-    marginBottom: 24
+    // Tightened so top/bottom whitespace around the actions reads balanced.
+    marginBottom: 16
   },
   buttonRow: {
     flexDirection: "row",
@@ -303,15 +357,18 @@ const styles = reactNative.StyleSheet.create({
   actionBtn: {
     paddingVertical: 12,
     paddingHorizontal: 24,
-    borderRadius: 8,
+    // Pill (== radii.pill). Buttons here are raw Pressables, not kits Button,
+    // so the pill comes from borderRadius — the pattern the `buttons` array
+    // path (`b.rounded && {borderRadius: 999}`) already uses in this file.
+    borderRadius: 999,
     minWidth: 100,
     alignItems: "center",
     justifyContent: "center"
   },
-  // Taller, rounder buttons for the bottom-sheet action row.
+  // Taller buttons for the bottom-sheet action row (pill shape shared).
   actionBtnSheet: {
     paddingVertical: 16,
-    borderRadius: 12
+    borderRadius: 999
   },
   actionBtnOutlined: {
     backgroundColor: "transparent",