@lmb-it/kitsconcerto-native 0.1.242 → 0.1.244

package/layout/List/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/layout/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/layout/List/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst List =\n    ({className, children, ref, ...props}: PropsWithChildren<IFlexComponent>) => {\n\n        const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n        return (\n            <ResponsiveElement ref={ref}\n                               additionalClasses={className}\n                               cssProps={cssProps}\n                               nativeProps={nativeProps}\n                               as={\"List\"}\n                               children={children}/>\n        )\n    }\n\n\nexport default List;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,IAAA,GACF,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAyC;AAEzE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAK,aAAkB,KAAK,CAAA;AAExD,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/layout/List/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst List =\n    ({className, children, ref, ...props}: PropsWithChildren<IFlexComponent>) => {\n\n        const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n        return (\n            <ResponsiveElement ref={ref}\n                               additionalClasses={className}\n                               cssProps={cssProps}\n                               nativeProps={nativeProps}\n                               as={\"List\"}\n                               children={children}/>\n        )\n    }\n\n\nexport default List;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,IAAA,GACF,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAyC;AAEzE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAK,aAAkB,KAAK,CAAA;AAExD,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}

package/layout/ListItem/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/layout/ListItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/layout/ListItem/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst ListItem = ({className, children, ref, ...props}:PropsWithChildren<IFlexComponent>) => {\n\n    const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n    return (\n        <ResponsiveElement ref={ref}\n                           additionalClasses={className}\n                           cssProps={cssProps}\n                           nativeProps={nativeProps}\n                           as={\"ListItem\"}\n                           children={children}/>\n    )\n}\n\nexport default ListItem;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,QAAA,GAAW,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAwC;AAEzF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAKA,qBAAkB,KAAK,CAAA;AAExD,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,UAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/layout/ListItem/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst ListItem = ({className, children, ref, ...props}:PropsWithChildren<IFlexComponent>) => {\n\n    const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n    return (\n        <ResponsiveElement ref={ref}\n                           additionalClasses={className}\n                           cssProps={cssProps}\n                           nativeProps={nativeProps}\n                           as={\"ListItem\"}\n                           children={children}/>\n    )\n}\n\nexport default ListItem;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,QAAA,GAAW,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAwC;AAEzF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAKA,qBAAkB,KAAK,CAAA;AAExD,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,UAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}

package/layout/ListItem/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/layout/ListItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/layout/ListItem/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst ListItem = ({className, children, ref, ...props}:PropsWithChildren<IFlexComponent>) => {\n\n    const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n    return (\n        <ResponsiveElement ref={ref}\n                           additionalClasses={className}\n                           cssProps={cssProps}\n                           nativeProps={nativeProps}\n                           as={\"ListItem\"}\n                           children={children}/>\n    )\n}\n\nexport default ListItem;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,QAAA,GAAW,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAwC;AAEzF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAK,aAAkB,KAAK,CAAA;AAExD,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,UAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/layout/ListItem/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst ListItem = ({className, children, ref, ...props}:PropsWithChildren<IFlexComponent>) => {\n\n    const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n    return (\n        <ResponsiveElement ref={ref}\n                           additionalClasses={className}\n                           cssProps={cssProps}\n                           nativeProps={nativeProps}\n                           as={\"ListItem\"}\n                           children={children}/>\n    )\n}\n\nexport default ListItem;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,QAAA,GAAW,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAwC;AAEzF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAK,aAAkB,KAAK,CAAA;AAExD,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,UAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}

package/layout/ScrollView/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/layout/ScrollView/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/layout/ScrollView/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IScrollViewComponent} from \"@lmb-it/kitsconcerto-types\";\n\nconst KitsScrollView = ({children, ref, ...props}: PropsWithChildren<IScrollViewComponent>) => {\n    const {cssProps, nativeProps} = useSeparator<any>(props);\n\n    return (\n        <ResponsiveElement\n            ref={ref}\n            as={\"ScrollView\"}\n            cssProps={cssProps}\n            nativeProps={nativeProps}\n            children={children}\n        />\n    );\n};\n\nexport default KitsScrollView;\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,iBAAiB,CAAC,EAAC,UAAU,GAAA,EAAK,GAAG,OAAK,KAA+C;AAC3F,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAIA,qBAAkB,KAAK,CAAA;AAEvD,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,EAAA,EAAI,YAAA;AAAA,MACJ,QAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AAAA,GACJ;AAER;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/layout/ScrollView/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IScrollViewComponent} from \"@lmb-it/kitsconcerto-types\";\n\nconst KitsScrollView = ({children, ref, ...props}: PropsWithChildren<IScrollViewComponent>) => {\n    const {cssProps, nativeProps} = useSeparator<any>(props);\n\n    return (\n        <ResponsiveElement\n            ref={ref}\n            as={\"ScrollView\"}\n            cssProps={cssProps}\n            nativeProps={nativeProps}\n            children={children}\n        />\n    );\n};\n\nexport default KitsScrollView;\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,iBAAiB,CAAC,EAAC,UAAU,GAAA,EAAK,GAAG,OAAK,KAA+C;AAC3F,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAIA,qBAAkB,KAAK,CAAA;AAEvD,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,EAAA,EAAI,YAAA;AAAA,MACJ,QAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AAAA,GACJ;AAER;;;;"}

package/layout/ScrollView/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/layout/ScrollView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/layout/ScrollView/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IScrollViewComponent} from \"@lmb-it/kitsconcerto-types\";\n\nconst KitsScrollView = ({children, ref, ...props}: PropsWithChildren<IScrollViewComponent>) => {\n    const {cssProps, nativeProps} = useSeparator<any>(props);\n\n    return (\n        <ResponsiveElement\n            ref={ref}\n            as={\"ScrollView\"}\n            cssProps={cssProps}\n            nativeProps={nativeProps}\n            children={children}\n        />\n    );\n};\n\nexport default KitsScrollView;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,iBAAiB,CAAC,EAAC,UAAU,GAAA,EAAK,GAAG,OAAK,KAA+C;AAC3F,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAI,aAAkB,KAAK,CAAA;AAEvD,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,EAAA,EAAI,YAAA;AAAA,MACJ,QAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AAAA,GACJ;AAER;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/layout/ScrollView/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IScrollViewComponent} from \"@lmb-it/kitsconcerto-types\";\n\nconst KitsScrollView = ({children, ref, ...props}: PropsWithChildren<IScrollViewComponent>) => {\n    const {cssProps, nativeProps} = useSeparator<any>(props);\n\n    return (\n        <ResponsiveElement\n            ref={ref}\n            as={\"ScrollView\"}\n            cssProps={cssProps}\n            nativeProps={nativeProps}\n            children={children}\n        />\n    );\n};\n\nexport default KitsScrollView;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,iBAAiB,CAAC,EAAC,UAAU,GAAA,EAAK,GAAG,OAAK,KAA+C;AAC3F,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAI,aAAkB,KAAK,CAAA;AAEvD,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,EAAA,EAAI,YAAA;AAAA,MACJ,QAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AAAA,GACJ;AAER;;;;"}

package/layout/VStack/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/layout/VStack/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/layout/VStack/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IStackProps, IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\ntype IsolatedStack = Omit<IStackProps, keyof IStyleClasses>;\n\n/**\n * Maps the `space` prop to a gap value in dp. Matches the HStack scale.\n */\nconst SPACE_TO_GAP: Record<NonNullable<IStackProps[\"space\"]>, number> = {\n    xs: 4,\n    sm: 8,\n    md: 12,\n    lg: 16,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 28,\n    \"4xl\": 32,\n};\n\n/**\n * VStack (native)\n *\n * Lays children out in a vertical column with a gap derived from `space`.\n *\n * Implementation note: identical rationale to HStack — we render through\n * `ResponsiveElement as=\"Box\"` (a plain React Native View) and force\n * `flexDirection: 'column'` + `gap` via `cssProps` instead of routing\n * through a Nativewind-classname Gluestack component that isn't reliable\n * across the yalc package boundary.\n *\n * Consumer's own `flexDirection=` / `gap=` props (passed via cssProps)\n * spread after the defaults and win when explicitly set.\n */\nconst VStack: React.FC<PropsWithChildren<IStackProps>> = (props) => {\n    const {cssProps, nativeProps} = useSeparator<IStackProps>(props);\n    const {\n        space = \"md\",\n        reversed = false,\n        scrollable,\n        children,\n        style,\n        entering,\n        exiting,\n        ...rest\n    } = nativeProps;\n\n    return (\n        <ResponsiveElement<IsolatedStack>\n            ref={props.ref}\n            as=\"Box\"\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            cssProps={{\n                flexDirection: reversed ? \"column-reverse\" : \"column\",\n                gap: SPACE_TO_GAP[space],\n                ...cssProps,\n            }}\n            nativeProps={rest}\n        >\n            {children}\n        </ResponsiveElement>\n    );\n};\n\nexport default VStack;\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAkE;AAAA,EACpE,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAgBA,MAAM,MAAA,GAAmD,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAIA,qBAA0B,KAAK,CAAA;AAC/D,EAAA,MAAM;AAAA,IACF,KAAA,GAAQ,IAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,UAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,WAAA;AAEJ,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,EAAA,EAAG,KAAA;AAAA,MACH,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU;AAAA,QACN,aAAA,EAAe,WAAW,gBAAA,GAAmB,QAAA;AAAA,QAC7C,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA,QACvB,GAAG;AAAA,OACP;AAAA,MACA,WAAA,EAAa,IAAA;AAAA,MAEZ;AAAA;AAAA,GACL;AAER;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/layout/VStack/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IStackProps, IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\ntype IsolatedStack = Omit<IStackProps, keyof IStyleClasses>;\n\n/**\n * Maps the `space` prop to a gap value in dp. Matches the HStack scale.\n */\nconst SPACE_TO_GAP: Record<NonNullable<IStackProps[\"space\"]>, number> = {\n    xs: 4,\n    sm: 8,\n    md: 12,\n    lg: 16,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 28,\n    \"4xl\": 32,\n};\n\n/**\n * VStack (native)\n *\n * Lays children out in a vertical column with a gap derived from `space`.\n *\n * Implementation note: identical rationale to HStack — we render through\n * `ResponsiveElement as=\"Box\"` (a plain React Native View) and force\n * `flexDirection: 'column'` + `gap` via `cssProps` instead of routing\n * through a Nativewind-classname Gluestack component that isn't reliable\n * across the yalc package boundary.\n *\n * Consumer's own `flexDirection=` / `gap=` props (passed via cssProps)\n * spread after the defaults and win when explicitly set.\n */\nconst VStack: React.FC<PropsWithChildren<IStackProps>> = (props) => {\n    const {cssProps, nativeProps} = useSeparator<IStackProps>(props);\n    const {\n        space = \"md\",\n        reversed = false,\n        scrollable,\n        children,\n        style,\n        entering,\n        exiting,\n        ...rest\n    } = nativeProps;\n\n    return (\n        <ResponsiveElement<IsolatedStack>\n            ref={props.ref}\n            as=\"Box\"\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            cssProps={{\n                flexDirection: reversed ? \"column-reverse\" : \"column\",\n                gap: SPACE_TO_GAP[space],\n                ...cssProps,\n            }}\n            nativeProps={rest}\n        >\n            {children}\n        </ResponsiveElement>\n    );\n};\n\nexport default VStack;\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAkE;AAAA,EACpE,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAgBA,MAAM,MAAA,GAAmD,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAIA,qBAA0B,KAAK,CAAA;AAC/D,EAAA,MAAM;AAAA,IACF,KAAA,GAAQ,IAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,UAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,WAAA;AAEJ,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,EAAA,EAAG,KAAA;AAAA,MACH,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU;AAAA,QACN,aAAA,EAAe,WAAW,gBAAA,GAAmB,QAAA;AAAA,QAC7C,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA,QACvB,GAAG;AAAA,OACP;AAAA,MACA,WAAA,EAAa,IAAA;AAAA,MAEZ;AAAA;AAAA,GACL;AAER;;;;"}

package/layout/VStack/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/layout/VStack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/layout/VStack/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IStackProps, IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\ntype IsolatedStack = Omit<IStackProps, keyof IStyleClasses>;\n\n/**\n * Maps the `space` prop to a gap value in dp. Matches the HStack scale.\n */\nconst SPACE_TO_GAP: Record<NonNullable<IStackProps[\"space\"]>, number> = {\n    xs: 4,\n    sm: 8,\n    md: 12,\n    lg: 16,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 28,\n    \"4xl\": 32,\n};\n\n/**\n * VStack (native)\n *\n * Lays children out in a vertical column with a gap derived from `space`.\n *\n * Implementation note: identical rationale to HStack — we render through\n * `ResponsiveElement as=\"Box\"` (a plain React Native View) and force\n * `flexDirection: 'column'` + `gap` via `cssProps` instead of routing\n * through a Nativewind-classname Gluestack component that isn't reliable\n * across the yalc package boundary.\n *\n * Consumer's own `flexDirection=` / `gap=` props (passed via cssProps)\n * spread after the defaults and win when explicitly set.\n */\nconst VStack: React.FC<PropsWithChildren<IStackProps>> = (props) => {\n    const {cssProps, nativeProps} = useSeparator<IStackProps>(props);\n    const {\n        space = \"md\",\n        reversed = false,\n        scrollable,\n        children,\n        style,\n        entering,\n        exiting,\n        ...rest\n    } = nativeProps;\n\n    return (\n        <ResponsiveElement<IsolatedStack>\n            ref={props.ref}\n            as=\"Box\"\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            cssProps={{\n                flexDirection: reversed ? \"column-reverse\" : \"column\",\n                gap: SPACE_TO_GAP[space],\n                ...cssProps,\n            }}\n            nativeProps={rest}\n        >\n            {children}\n        </ResponsiveElement>\n    );\n};\n\nexport default VStack;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAkE;AAAA,EACpE,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAgBA,MAAM,MAAA,GAAmD,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAI,aAA0B,KAAK,CAAA;AAC/D,EAAA,MAAM;AAAA,IACF,KAAA,GAAQ,IAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,UAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,WAAA;AAEJ,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACG,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,EAAA,EAAG,KAAA;AAAA,MACH,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU;AAAA,QACN,aAAA,EAAe,WAAW,gBAAA,GAAmB,QAAA;AAAA,QAC7C,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA,QACvB,GAAG;AAAA,OACP;AAAA,MACA,WAAA,EAAa,IAAA;AAAA,MAEZ;AAAA;AAAA,GACL;AAER;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/layout/VStack/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IStackProps, IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\ntype IsolatedStack = Omit<IStackProps, keyof IStyleClasses>;\n\n/**\n * Maps the `space` prop to a gap value in dp. Matches the HStack scale.\n */\nconst SPACE_TO_GAP: Record<NonNullable<IStackProps[\"space\"]>, number> = {\n    xs: 4,\n    sm: 8,\n    md: 12,\n    lg: 16,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 28,\n    \"4xl\": 32,\n};\n\n/**\n * VStack (native)\n *\n * Lays children out in a vertical column with a gap derived from `space`.\n *\n * Implementation note: identical rationale to HStack — we render through\n * `ResponsiveElement as=\"Box\"` (a plain React Native View) and force\n * `flexDirection: 'column'` + `gap` via `cssProps` instead of routing\n * through a Nativewind-classname Gluestack component that isn't reliable\n * across the yalc package boundary.\n *\n * Consumer's own `flexDirection=` / `gap=` props (passed via cssProps)\n * spread after the defaults and win when explicitly set.\n */\nconst VStack: React.FC<PropsWithChildren<IStackProps>> = (props) => {\n    const {cssProps, nativeProps} = useSeparator<IStackProps>(props);\n    const {\n        space = \"md\",\n        reversed = false,\n        scrollable,\n        children,\n        style,\n        entering,\n        exiting,\n        ...rest\n    } = nativeProps;\n\n    return (\n        <ResponsiveElement<IsolatedStack>\n            ref={props.ref}\n            as=\"Box\"\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            cssProps={{\n                flexDirection: reversed ? \"column-reverse\" : \"column\",\n                gap: SPACE_TO_GAP[space],\n                ...cssProps,\n            }}\n            nativeProps={rest}\n        >\n            {children}\n        </ResponsiveElement>\n    );\n};\n\nexport default VStack;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAkE;AAAA,EACpE,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAgBA,MAAM,MAAA,GAAmD,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAI,aAA0B,KAAK,CAAA;AAC/D,EAAA,MAAM;AAAA,IACF,KAAA,GAAQ,IAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,UAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,WAAA;AAEJ,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACG,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,EAAA,EAAG,KAAA;AAAA,MACH,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU;AAAA,QACN,aAAA,EAAe,WAAW,gBAAA,GAAmB,QAAA;AAAA,QAC7C,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA,QACvB,GAAG;AAAA,OACP;AAAA,MACA,WAAA,EAAa,IAAA;AAAA,MAEZ;AAAA;AAAA,GACL;AAER;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lmb-it/kitsconcerto-native",
-  "version": "0.1.242",
+  "version": "0.1.244",
   "description": "KitsConcerto — Native (React Native) UI components",
   "main": "index.js",
   "module": "index.js",

package/packages/types/src/Theme/alphaColors.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+const ALPHA_STEPS = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+const ALPHA_COLOR_VARS = (() => {
+  const map = {};
+  for (const step of ALPHA_STEPS) {
+    const a = step / 100;
+    map[`--kits-white-alpha-${step}`] = `rgba(255, 255, 255, ${a})`;
+    map[`--kits-black-alpha-${step}`] = `rgba(0, 0, 0, ${a})`;
+  }
+  return map;
+})();
+const ALPHA_TOKEN_NAMES = new Set(
+  ALPHA_STEPS.flatMap((step) => [`white-alpha-${step}`, `black-alpha-${step}`])
+);
+function isAlphaToken(value) {
+  return ALPHA_TOKEN_NAMES.has(value);
+}
+
+exports.ALPHA_COLOR_VARS = ALPHA_COLOR_VARS;
+exports.ALPHA_STEPS = ALPHA_STEPS;
+exports.ALPHA_TOKEN_NAMES = ALPHA_TOKEN_NAMES;
+exports.isAlphaToken = isAlphaToken;
+//# sourceMappingURL=alphaColors.cjs.map

package/packages/types/src/Theme/alphaColors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alphaColors.cjs","sources":["../../../../../../../types/src/Theme/alphaColors.ts"],"sourcesContent":["/**\n * Alpha overlay color families — `white-alpha-*` and `black-alpha-*`.\n *\n * These back the tokens `ColorValue` already advertises (`white-alpha-10` …\n * `white-alpha-90`, `black-alpha-10` … `black-alpha-90`). The step (10…90)\n * IS the alpha percentage, matching the PrimeFlex convention the rest of\n * `ColorValue` follows (`blue-50…900`, `surface-0…900`).\n *\n * This is the SINGLE SOURCE OF TRUTH: both the web CSS-var injector\n * (`generateCssVariables`) and the native color-map builder\n * (`buildNativeColorMap`) derive their `--kits-*-alpha-*` entries from\n * {@link ALPHA_COLOR_VARS}, so the two platforms can never drift.\n *\n * LITERAL by design: the values are identical in light and dark theme\n * builds and must NEVER be routed through dark-mode inversion. They are\n * overlay / scrim colors — a 60% white scrim over an image has to stay a\n * 60% white scrim in dark mode, not flip to black.\n */\n\n/** Alpha steps (also the alpha percentage of each step). */\nexport const ALPHA_STEPS = [10, 20, 30, 40, 50, 60, 70, 80, 90] as const;\n\n/**\n * CSS-variable name → literal rgba value. Keys are the fully-qualified\n * `--kits-<family>-alpha-<step>` names emitted into `:root` (web) and the\n * native color map.\n */\nexport const ALPHA_COLOR_VARS: Record<string, string> = (() => {\n    const map: Record<string, string> = {};\n    for (const step of ALPHA_STEPS) {\n        const a = step / 100;\n        map[`--kits-white-alpha-${step}`] = `rgba(255, 255, 255, ${a})`;\n        map[`--kits-black-alpha-${step}`] = `rgba(0, 0, 0, ${a})`;\n    }\n    return map;\n})();\n\n/** Bare token names as authored in props, e.g. `'white-alpha-60'`. */\nexport const ALPHA_TOKEN_NAMES: ReadonlySet<string> = new Set(\n    ALPHA_STEPS.flatMap((step) => [`white-alpha-${step}`, `black-alpha-${step}`]),\n);\n\n/** True when `value` is an advertised alpha token (`white-alpha-60`, `black-alpha-90`, …). */\nexport function isAlphaToken(value: string): boolean {\n    return ALPHA_TOKEN_NAMES.has(value);\n}\n"],"names":[],"mappings":";;AAoBO,MAAM,WAAA,GAAc,CAAC,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAE;AAOvD,MAAM,oBAA4C,MAAM;AAC3D,EAAA,MAAM,MAA8B,EAAC;AACrC,EAAA,KAAA,MAAW,QAAQ,WAAA,EAAa;AAC5B,IAAA,MAAM,IAAI,IAAA,GAAO,GAAA;AACjB,IAAA,GAAA,CAAI,CAAA,mBAAA,EAAsB,IAAI,CAAA,CAAE,CAAA,GAAI,uBAAuB,CAAC,CAAA,CAAA,CAAA;AAC5D,IAAA,GAAA,CAAI,CAAA,mBAAA,EAAsB,IAAI,CAAA,CAAE,CAAA,GAAI,iBAAiB,CAAC,CAAA,CAAA,CAAA;AAAA,EAC1D;AACA,EAAA,OAAO,GAAA;AACX,CAAA;AAGO,MAAM,oBAAyC,IAAI,GAAA;AAAA,EACtD,WAAA,CAAY,OAAA,CAAQ,CAAC,IAAA,KAAS,CAAC,CAAA,YAAA,EAAe,IAAI,CAAA,CAAA,EAAI,CAAA,YAAA,EAAe,IAAI,CAAA,CAAE,CAAC;AAChF;AAGO,SAAS,aAAa,KAAA,EAAwB;AACjD,EAAA,OAAO,iBAAA,CAAkB,IAAI,KAAK,CAAA;AACtC;;;;;;;"}

package/packages/types/src/Theme/alphaColors.js

@@ -0,0 +1,19 @@
+const ALPHA_STEPS = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+const ALPHA_COLOR_VARS = (() => {
+  const map = {};
+  for (const step of ALPHA_STEPS) {
+    const a = step / 100;
+    map[`--kits-white-alpha-${step}`] = `rgba(255, 255, 255, ${a})`;
+    map[`--kits-black-alpha-${step}`] = `rgba(0, 0, 0, ${a})`;
+  }
+  return map;
+})();
+const ALPHA_TOKEN_NAMES = new Set(
+  ALPHA_STEPS.flatMap((step) => [`white-alpha-${step}`, `black-alpha-${step}`])
+);
+function isAlphaToken(value) {
+  return ALPHA_TOKEN_NAMES.has(value);
+}
+
+export { ALPHA_COLOR_VARS, ALPHA_STEPS, ALPHA_TOKEN_NAMES, isAlphaToken };
+//# sourceMappingURL=alphaColors.js.map

package/packages/types/src/Theme/alphaColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alphaColors.js","sources":["../../../../../../../types/src/Theme/alphaColors.ts"],"sourcesContent":["/**\n * Alpha overlay color families — `white-alpha-*` and `black-alpha-*`.\n *\n * These back the tokens `ColorValue` already advertises (`white-alpha-10` …\n * `white-alpha-90`, `black-alpha-10` … `black-alpha-90`). The step (10…90)\n * IS the alpha percentage, matching the PrimeFlex convention the rest of\n * `ColorValue` follows (`blue-50…900`, `surface-0…900`).\n *\n * This is the SINGLE SOURCE OF TRUTH: both the web CSS-var injector\n * (`generateCssVariables`) and the native color-map builder\n * (`buildNativeColorMap`) derive their `--kits-*-alpha-*` entries from\n * {@link ALPHA_COLOR_VARS}, so the two platforms can never drift.\n *\n * LITERAL by design: the values are identical in light and dark theme\n * builds and must NEVER be routed through dark-mode inversion. They are\n * overlay / scrim colors — a 60% white scrim over an image has to stay a\n * 60% white scrim in dark mode, not flip to black.\n */\n\n/** Alpha steps (also the alpha percentage of each step). */\nexport const ALPHA_STEPS = [10, 20, 30, 40, 50, 60, 70, 80, 90] as const;\n\n/**\n * CSS-variable name → literal rgba value. Keys are the fully-qualified\n * `--kits-<family>-alpha-<step>` names emitted into `:root` (web) and the\n * native color map.\n */\nexport const ALPHA_COLOR_VARS: Record<string, string> = (() => {\n    const map: Record<string, string> = {};\n    for (const step of ALPHA_STEPS) {\n        const a = step / 100;\n        map[`--kits-white-alpha-${step}`] = `rgba(255, 255, 255, ${a})`;\n        map[`--kits-black-alpha-${step}`] = `rgba(0, 0, 0, ${a})`;\n    }\n    return map;\n})();\n\n/** Bare token names as authored in props, e.g. `'white-alpha-60'`. */\nexport const ALPHA_TOKEN_NAMES: ReadonlySet<string> = new Set(\n    ALPHA_STEPS.flatMap((step) => [`white-alpha-${step}`, `black-alpha-${step}`]),\n);\n\n/** True when `value` is an advertised alpha token (`white-alpha-60`, `black-alpha-90`, …). */\nexport function isAlphaToken(value: string): boolean {\n    return ALPHA_TOKEN_NAMES.has(value);\n}\n"],"names":[],"mappings":"AAoBO,MAAM,WAAA,GAAc,CAAC,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAE;AAOvD,MAAM,oBAA4C,MAAM;AAC3D,EAAA,MAAM,MAA8B,EAAC;AACrC,EAAA,KAAA,MAAW,QAAQ,WAAA,EAAa;AAC5B,IAAA,MAAM,IAAI,IAAA,GAAO,GAAA;AACjB,IAAA,GAAA,CAAI,CAAA,mBAAA,EAAsB,IAAI,CAAA,CAAE,CAAA,GAAI,uBAAuB,CAAC,CAAA,CAAA,CAAA;AAC5D,IAAA,GAAA,CAAI,CAAA,mBAAA,EAAsB,IAAI,CAAA,CAAE,CAAA,GAAI,iBAAiB,CAAC,CAAA,CAAA,CAAA;AAAA,EAC1D;AACA,EAAA,OAAO,GAAA;AACX,CAAA;AAGO,MAAM,oBAAyC,IAAI,GAAA;AAAA,EACtD,WAAA,CAAY,OAAA,CAAQ,CAAC,IAAA,KAAS,CAAC,CAAA,YAAA,EAAe,IAAI,CAAA,CAAA,EAAI,CAAA,YAAA,EAAe,IAAI,CAAA,CAAE,CAAC;AAChF;AAGO,SAAS,aAAa,KAAA,EAAwB;AACjD,EAAA,OAAO,iBAAA,CAAkB,IAAI,KAAK,CAAA;AACtC;;;;"}

package/packages/types/src/Theme/defaultTheme.cjs

@@ -1228,7 +1228,7 @@ const defaultTheme = {
     ProgressBar: { root: { props: { max: 100, color: "brand", trackColor: "gray.200", thickness: 8, rounded: true } } },
     Timeline: { root: { props: { size: "md", activeColor: "brand", trackColor: "gray.200" } } },
     EmptyState: { root: { props: { size: "md", accentColor: "brand" } } },
-    Tabs: { root: { props: { size: "md", activeColor: "brand", scrollable: true, gap: 8 } } },
+    Tabs: { root: { props: { size: "md", activeColor: "brand", scrollable: true, gap: 8, countVariant: "suffix", activeBadgeBackground: "surface-card", activeBadgeTextColor: "text-primary", inactiveBadgeBackground: "gray.200", inactiveBadgeTextColor: "text-secondary", inactiveBackground: "gray.100", inactiveTextColor: "text-secondary", sizeHeights: { sm: 28, md: 32, lg: 40 } } } },
     BottomTabBar: { root: { props: { activeColor: "brand", inactiveColor: "text-secondary", background: "surface-card", showLabels: true } } },
     Gallery: { root: { props: { columns: 2, gap: 8, aspectRatio: 1, radius: 12 } } },
     Carousel: { root: { props: { aspectRatio: 1.2, radius: 0, showCounter: true, showDots: true } } },