@cdx-ui/components 0.0.1-alpha.3 → 0.0.1-alpha.31

package/lib/module/components/BottomSheet/index.js

@@ -0,0 +1,242 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useRef } from 'react';
+import { Dimensions, Pressable, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView, BottomSheetView, BottomSheetBackdrop, BottomSheetFooter as GorhomBottomSheetFooter } from '@gorhom/bottom-sheet';
+import { cn } from '@cdx-ui/utils';
+import { ArrowBackIosNew, Close } from '@cdx-ui/icons';
+import { Heading } from '../Heading';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { bottomSheetBackButtonVariants, bottomSheetBackIconVariants, bottomSheetCloseButtonVariants, bottomSheetCloseIconVariants, bottomSheetContainerVariants, bottomSheetContentVariants, bottomSheetFooterVariants, bottomSheetHeaderVariants, bottomSheetSubtitleVariants, handleIndicatorStyle } from './styles';
+
+/** Ref type for BottomSheet; forwards the @gorhom modal ref (present, dismiss, snapToIndex, minimize, restore, etc.). */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function BottomSheetHeaderComponent({
+  title,
+  subtitle,
+  children,
+  className,
+  onClose,
+  closeAccessibilityLabel,
+  onBack,
+  backAccessibilityLabel = 'Go back'
+}, ref) {
+  const hasTitle = title !== undefined && title !== '';
+  const hasContent = hasTitle || !!children || !!onBack;
+  const computedClassName = cn(bottomSheetHeaderVariants({
+    hasTitle: hasContent
+  }), className);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: computedClassName,
+    children: [onBack && /*#__PURE__*/_jsx(Pressable, {
+      onPress: onBack,
+      hitSlop: 12,
+      accessibilityRole: "button",
+      accessibilityLabel: backAccessibilityLabel,
+      className: cn(bottomSheetBackButtonVariants()),
+      children: /*#__PURE__*/_jsx(Icon, {
+        as: ArrowBackIosNew,
+        className: bottomSheetBackIconVariants()
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      className: "flex-1",
+      children: children ?? (hasTitle ? /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsx(Heading, {
+          size: "xs",
+          className: "text-lg",
+          children: title
+        }), subtitle ? /*#__PURE__*/_jsx(Text, {
+          className: bottomSheetSubtitleVariants(),
+          children: subtitle
+        }) : null]
+      }) : null)
+    }), onClose && /*#__PURE__*/_jsx(BottomSheetCloseButton, {
+      onPress: onClose,
+      ...(closeAccessibilityLabel !== undefined && {
+        accessibilityLabel: closeAccessibilityLabel
+      })
+    })]
+  });
+}
+BottomSheetHeaderComponent.displayName = 'BottomSheet.Header';
+const BottomSheetHeader = /*#__PURE__*/forwardRef(BottomSheetHeaderComponent);
+BottomSheetHeader.displayName = 'BottomSheet.Header';
+
+// =============================================================================
+// CLOSEBUTTON
+// =============================================================================
+
+function BottomSheetCloseButton({
+  onPress,
+  className,
+  accessibilityLabel = 'Close'
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    hitSlop: 12,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    className: cn(bottomSheetCloseButtonVariants(), className),
+    children: /*#__PURE__*/_jsx(Icon, {
+      as: Close,
+      className: bottomSheetCloseIconVariants()
+    })
+  });
+}
+BottomSheetCloseButton.displayName = 'BottomSheet.CloseButton';
+
+// =============================================================================
+// CONTENT
+// =============================================================================
+
+const BottomSheetContent = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  hasSafeAreaInset,
+  style
+}, ref) => {
+  const insets = useSafeAreaInsets();
+  const computedClassName = cn(bottomSheetContentVariants(), className);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: computedClassName,
+    style: hasSafeAreaInset ? {
+      paddingBottom: insets.bottom,
+      ...style
+    } : style,
+    pointerEvents: "box-none",
+    children: children
+  });
+});
+BottomSheetContent.displayName = 'BottomSheet.Content';
+
+// =============================================================================
+// FOOTER
+// =============================================================================
+
+const BottomSheetFooter = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  style
+}, ref) => {
+  const insets = useSafeAreaInsets();
+  const computedClassName = cn(bottomSheetFooterVariants(), className);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: computedClassName,
+    style: {
+      paddingBottom: Math.max(insets.bottom, 24),
+      ...style
+    },
+    pointerEvents: "box-none",
+    children: children
+  });
+});
+BottomSheetFooter.displayName = 'BottomSheet.Footer';
+
+// =============================================================================
+// MODAL WRAPPER (WITH STYLES)
+// =============================================================================
+
+const MAX_DYNAMIC_CONTENT_SIZE = Dimensions.get('window').height * 0.9;
+const CustomBackdrop = props => {
+  return /*#__PURE__*/_jsx(BottomSheetBackdrop, {
+    ...props,
+    disappearsOnIndex: -1,
+    appearsOnIndex: 0,
+    opacity: 0.5,
+    pressBehavior: "close"
+  });
+};
+const BottomSheetModalStyled = /*#__PURE__*/forwardRef(({
+  handleVisible = true,
+  footer,
+  ...rest
+}, ref) => {
+  const renderFooter = useCallback(props => /*#__PURE__*/_jsx(GorhomBottomSheetFooter, {
+    ...props,
+    children: footer
+  }), [footer]);
+  return /*#__PURE__*/_jsx(BottomSheetModal, {
+    ref: ref,
+    enableDynamicSizing: true,
+    maxDynamicContentSize: MAX_DYNAMIC_CONTENT_SIZE,
+    handleComponent: handleVisible ? undefined : null,
+    handleIndicatorStyle: handleVisible ? handleIndicatorStyle : undefined,
+    backdropComponent: CustomBackdrop,
+    backgroundComponent: backgroundProps => /*#__PURE__*/_jsx(View, {
+      ...backgroundProps,
+      className: cn(bottomSheetContainerVariants())
+    }),
+    ...rest,
+    ...(footer != null && {
+      footerComponent: renderFooter
+    })
+  });
+});
+BottomSheetModalStyled.displayName = 'BottomSheet.Modal';
+
+// =============================================================================
+// SCROLLVIEW WRAPPER (with footer margin adjustment enabled by default)
+// =============================================================================
+
+function BottomSheetScrollViewStyled({
+  enableFooterMarginAdjustment = true,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(BottomSheetScrollView, {
+    enableFooterMarginAdjustment: enableFooterMarginAdjustment,
+    ...rest,
+    children: children
+  });
+}
+BottomSheetScrollViewStyled.displayName = 'BottomSheet.ScrollView';
+
+// =============================================================================
+// VIEW WRAPPER (with footer margin adjustment enabled by default)
+// =============================================================================
+
+function BottomSheetViewStyled({
+  enableFooterMarginAdjustment = true,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(BottomSheetView, {
+    enableFooterMarginAdjustment: enableFooterMarginAdjustment,
+    ...rest,
+    children: children
+  });
+}
+BottomSheetViewStyled.displayName = 'BottomSheet.View';
+
+// Display names for gorhom components exposed as BottomSheet.*
+
+BottomSheetModalProvider.displayName = 'BottomSheet.Provider';
+
+// ── Public exports ────────────────────────────────────────
+
+export const BottomSheet = {
+  Modal: BottomSheetModalStyled,
+  Header: BottomSheetHeader,
+  Content: BottomSheetContent,
+  Footer: BottomSheetFooter,
+  Provider: BottomSheetModalProvider,
+  ScrollView: BottomSheetScrollViewStyled,
+  View: BottomSheetViewStyled
+};
+
+// ── Hooks ────────────────────────────────────────────────
+
+export function useBottomSheet() {
+  const ref = useRef(null);
+  return {
+    ref,
+    present: () => ref.current?.present(),
+    dismiss: () => ref.current?.dismiss()
+  };
+}
+//# sourceMappingURL=index.js.map

package/lib/module/components/BottomSheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useCallback","useRef","Dimensions","Pressable","View","useSafeAreaInsets","BottomSheetModal","BottomSheetModalProvider","BottomSheetScrollView","BottomSheetView","BottomSheetBackdrop","BottomSheetFooter","GorhomBottomSheetFooter","cn","ArrowBackIosNew","Close","Heading","Icon","Text","bottomSheetBackButtonVariants","bottomSheetBackIconVariants","bottomSheetCloseButtonVariants","bottomSheetCloseIconVariants","bottomSheetContainerVariants","bottomSheetContentVariants","bottomSheetFooterVariants","bottomSheetHeaderVariants","bottomSheetSubtitleVariants","handleIndicatorStyle","jsx","_jsx","jsxs","_jsxs","BottomSheetHeaderComponent","title","subtitle","children","className","onClose","closeAccessibilityLabel","onBack","backAccessibilityLabel","ref","hasTitle","undefined","hasContent","computedClassName","onPress","hitSlop","accessibilityRole","accessibilityLabel","as","size","BottomSheetCloseButton","displayName","BottomSheetHeader","BottomSheetContent","hasSafeAreaInset","style","insets","paddingBottom","bottom","pointerEvents","Math","max","MAX_DYNAMIC_CONTENT_SIZE","get","height","CustomBackdrop","props","disappearsOnIndex","appearsOnIndex","opacity","pressBehavior","BottomSheetModalStyled","handleVisible","footer","rest","renderFooter","enableDynamicSizing","maxDynamicContentSize","handleComponent","backdropComponent","backgroundComponent","backgroundProps","footerComponent","BottomSheetScrollViewStyled","enableFooterMarginAdjustment","BottomSheetViewStyled","BottomSheet","Modal","Header","Content","Footer","Provider","ScrollView","useBottomSheet","present","current","dismiss"],"sourceRoot":"../../../../src","sources":["components/BottomSheet/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/BottomSheet/styles.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import { cva } from 'class-variance-authority';
+import { COLOR_BG_PRIMARY, COLOR_BORDER_DEFAULT, COLOR_TEXT_PRIMARY, COLOR_TEXT_SECONDARY } from '../../styles/primitives';
+
+// ── Container ──────────────────────────────────────────────
+
+export const bottomSheetContainerVariants = cva(['rounded-t-3xl border-t border-x overflow-hidden', COLOR_BG_PRIMARY, COLOR_BORDER_DEFAULT]);
+
+// ── Header ─────────────────────────────────────────────────
+
+export const bottomSheetHeaderVariants = cva(['flex-row items-center justify-between min-h-12 px-4 pt-3 pb-2', COLOR_BG_PRIMARY, COLOR_TEXT_PRIMARY], {
+  variants: {
+    hasTitle: {
+      true: '',
+      false: 'justify-end'
+    }
+  },
+  defaultVariants: {
+    hasTitle: true
+  }
+});
+
+// ── Content ────────────────────────────────────────────────
+
+export const bottomSheetContentVariants = cva([COLOR_BG_PRIMARY, 'px-4 pb-6']);
+
+// ── Footer ─────────────────────────────────────────────────
+
+export const bottomSheetFooterVariants = cva(['px-4 pt-3 pb-4 border-t', COLOR_BG_PRIMARY, COLOR_BORDER_DEFAULT]);
+
+// ── Subtitle ────────────────────────────────────────────────
+
+export const bottomSheetSubtitleVariants = cva(['text-sm', COLOR_TEXT_SECONDARY]);
+
+// ── Back Button ─────────────────────────────────────────────
+
+export const bottomSheetBackButtonVariants = cva(['p-1 -m-1 mr-2 rounded-full active:opacity-70']);
+export const bottomSheetBackIconVariants = cva(['size-5 text-slate-500']);
+
+// ── Close Button ───────────────────────────────────────────
+
+export const bottomSheetCloseButtonVariants = cva(['p-1 -m-1 rounded-full active:opacity-70']);
+
+// ── Close Icon ─────────────────────────────────────────────
+
+export const bottomSheetCloseIconVariants = cva(['size-5 text-slate-500']);
+
+// ── Handle indicator ────────────────────────────────────────
+// Plain ViewStyle — gorhom's handleIndicatorStyle doesn't accept classNames.
+// slate-300 (#cbd5e1) maps to COLOR_BORDER_STRONG; update when raw token palette is available (TODO).
+export const handleIndicatorStyle = {
+  backgroundColor: '#cbd5e1',
+  width: 36,
+  height: 4,
+  borderRadius: 2
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/components/BottomSheet/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","COLOR_BG_PRIMARY","COLOR_BORDER_DEFAULT","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","bottomSheetContainerVariants","bottomSheetHeaderVariants","variants","hasTitle","true","false","defaultVariants","bottomSheetContentVariants","bottomSheetFooterVariants","bottomSheetSubtitleVariants","bottomSheetBackButtonVariants","bottomSheetBackIconVariants","bottomSheetCloseButtonVariants","bottomSheetCloseIconVariants","handleIndicatorStyle","backgroundColor","width","height","borderRadius"],"sourceRoot":"../../../../src","sources":["components/BottomSheet/styles.ts"],"mappings":";;AACA,SAASA,GAAG,QAA2B,0BAA0B;AACjE,SACEC,gBAAgB,EAChBC,oBAAoB,EACpBC,kBAAkB,EAClBC,oBAAoB,QACf,yBAAyB;;AAEhC;;AAEA,OAAO,MAAMC,4BAA4B,GAAGL,GAAG,CAAC,CAC9C,iDAAiD,EACjDC,gBAAgB,EAChBC,oBAAoB,CACrB,CAAC;;AAEF;;AAEA,OAAO,MAAMI,yBAAyB,GAAGN,GAAG,CAC1C,CACE,+DAA+D,EAC/DC,gBAAgB,EAChBE,kBAAkB,CACnB,EACD;EACEI,QAAQ,EAAE;IACRC,QAAQ,EAAE;MACRC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,QAAQ,EAAE;EACZ;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMI,0BAA0B,GAAGZ,GAAG,CAAC,CAACC,gBAAgB,EAAE,WAAW,CAAC,CAAC;;AAE9E;;AAEA,OAAO,MAAMY,yBAAyB,GAAGb,GAAG,CAAC,CAC3C,yBAAyB,EACzBC,gBAAgB,EAChBC,oBAAoB,CACrB,CAAC;;AAEF;;AAEA,OAAO,MAAMY,2BAA2B,GAAGd,GAAG,CAAC,CAAC,SAAS,EAAEI,oBAAoB,CAAC,CAAC;;AAEjF;;AAEA,OAAO,MAAMW,6BAA6B,GAAGf,GAAG,CAAC,CAAC,8CAA8C,CAAC,CAAC;AAElG,OAAO,MAAMgB,2BAA2B,GAAGhB,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC;;AAEzE;;AAEA,OAAO,MAAMiB,8BAA8B,GAAGjB,GAAG,CAAC,CAAC,yCAAyC,CAAC,CAAC;;AAE9F;;AAEA,OAAO,MAAMkB,4BAA4B,GAAGlB,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC;;AAE1E;AACA;AACA;AACA,OAAO,MAAMmB,oBAA+B,GAAG;EAC7CC,eAAe,EAAE,SAAS;EAC1BC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,CAAC;EACTC,YAAY,EAAE;AAChB,CAAC","ignoreList":[]}

package/lib/module/components/Box/Box.js

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import { View } from 'react-native';
 import { WrapStringChild } from '../../utils/WrapStringChild';
 import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated Use View instead */
 export const Box = /*#__PURE__*/forwardRef(({
   style,
   className,

package/lib/module/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","WrapStringChild","jsx","_jsx","Box","style","className","children","textProps","restProps","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/Box/Box.tsx"],"mappings":";;AAAA,SAA4BA,UAAU,QAAQ,OAAO;AACrD,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,eAAe,QAAQ,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ9D,OAAO,MAAMC,GAAG,gBAAGL,UAAU,CAC3B,CAAC;EAAEM,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAU,CAAC,EAAEC,GAAuB,KAAK;EACpF,oBACEP,IAAA,CAACH,IAAI;IAACU,GAAG,EAAEA,GAAI;IAACL,KAAK,EAAEA,KAAM;IAACC,SAAS,EAAEA,SAAU;IAAA,GAAKG,SAAS;IAAAF,QAAA,eAC/DJ,IAAA,CAACF,eAAe;MAACO,SAAS,EAAEA,SAAU;MAAAD,QAAA,EAAEA;IAAQ,CAAkB;EAAC,CAC/D,CAAC;AAEX,CACF,CAAC;AAEDH,GAAG,CAACO,WAAW,GAAG,KAAK","ignoreList":[]}
+{"version":3,"names":["forwardRef","View","WrapStringChild","jsx","_jsx","Box","style","className","children","textProps","restProps","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/Box/Box.tsx"],"mappings":";;AAAA,SAA4BA,UAAU,QAAQ,OAAO;AACrD,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,eAAe,QAAQ,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ9D;AACA,OAAO,MAAMC,GAAG,gBAAGL,UAAU,CAC3B,CAAC;EAAEM,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAU,CAAC,EAAEC,GAAuB,KAAK;EACpF,oBACEP,IAAA,CAACH,IAAI;IAACU,GAAG,EAAEA,GAAI;IAACL,KAAK,EAAEA,KAAM;IAACC,SAAS,EAAEA,SAAU;IAAA,GAAKG,SAAS;IAAAF,QAAA,eAC/DJ,IAAA,CAACF,eAAe;MAACO,SAAS,EAAEA,SAAU;MAAAD,QAAA,EAAEA;IAAQ,CAAkB;EAAC,CAC/D,CAAC;AAEX,CACF,CAAC;AAEDH,GAAG,CAACO,WAAW,GAAG,KAAK","ignoreList":[]}

package/lib/module/components/Button/buttonSharedVariants.js

@@ -0,0 +1,195 @@
+"use strict";
+
+/**
+ * Neutral compound-variant **slices** shared by Button and IconButton (no consumer `variant` keys).
+ *
+ * Each consumer maps these into its own CVA, e.g. filled surface → Button `strong` or IconButton `solid`;
+ * ghost surface / outline+ghost foreground → attach the appropriate `variant` / tuple for that component.
+ *
+ * Button-only outline **surface** (borders) stays in `Button/styles.ts`.
+ */
+import { Platform } from 'react-native';
+import { SEMANTIC_COLORS } from '../../styles/primitives';
+/** Root surface: filled semantic background (maps to Button `strong`, IconButton `solid`). */
+export const sharedFilledSurfaceCompounds = [{
+  color: 'action',
+  className: [SEMANTIC_COLORS.action.bg, Platform.select({
+    default: 'data-[active=true]:bg-slate-700',
+    web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700'
+  })]
+}, {
+  color: 'danger',
+  className: [SEMANTIC_COLORS.danger.bg, Platform.select({
+    default: 'data-[active=true]:bg-red-800',
+    web: 'data-[hover=true]:bg-red-700 data-[active=true]:data-[hover=true]:bg-red-800'
+  })]
+}, {
+  color: 'warning',
+  className: [SEMANTIC_COLORS.warning.bg, Platform.select({
+    default: 'data-[active=true]:bg-amber-700',
+    web: 'data-[hover=true]:bg-amber-600 data-[active=true]:data-[hover=true]:bg-amber-700'
+  })]
+}, {
+  color: 'success',
+  className: [SEMANTIC_COLORS.success.bg, Platform.select({
+    default: 'data-[active=true]:bg-green-800',
+    web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800'
+  })]
+}, {
+  color: 'info',
+  className: [SEMANTIC_COLORS.info.bg, Platform.select({
+    default: 'data-[active=true]:bg-sky-700',
+    web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700'
+  })]
+}, {
+  color: 'action',
+  mode: 'dark',
+  className: ['bg-slate-200', Platform.select({
+    default: 'data-[active=true]:bg-slate-400',
+    web: 'data-[hover=true]:bg-slate-300 data-[active=true]:data-[hover=true]:bg-slate-400'
+  })]
+}];
+
+/** Root surface: ghost hover/active fills (maps to `variant: 'ghost'` on Button and IconButton). */
+export const sharedGhostSurfaceCompounds = [{
+  color: 'danger',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-red-100',
+    web: 'data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:bg-red-100'
+  })]
+}, {
+  color: 'warning',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-amber-100',
+    web: 'data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:bg-amber-100'
+  })]
+}, {
+  color: 'success',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-green-100',
+    web: 'data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:bg-green-100'
+  })]
+}, {
+  color: 'info',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-sky-100',
+    web: 'data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:bg-sky-100'
+  })]
+}, {
+  color: 'action',
+  mode: 'dark',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-slate-700',
+    web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700'
+  })]
+}, {
+  color: 'danger',
+  mode: 'dark',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-red-950',
+    web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950'
+  })]
+}, {
+  color: 'warning',
+  mode: 'dark',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-amber-950',
+    web: 'data-[hover=true]:bg-amber-950/50 data-[active=true]:data-[hover=true]:bg-amber-950'
+  })]
+}, {
+  color: 'success',
+  mode: 'dark',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-green-950',
+    web: 'data-[hover=true]:bg-green-950/50 data-[active=true]:data-[hover=true]:bg-green-950'
+  })]
+}, {
+  color: 'info',
+  mode: 'dark',
+  className: [Platform.select({
+    default: 'data-[active=true]:bg-sky-950',
+    web: 'data-[hover=true]:bg-sky-950/50 data-[active=true]:data-[hover=true]:bg-sky-950'
+  })]
+}];
+
+/** Foreground on filled controls (maps to Button `strong`, IconButton `solid`). */
+export const sharedFilledForegroundTextCompounds = [{
+  color: 'action',
+  className: 'text-white'
+}, {
+  color: 'danger',
+  className: 'text-white'
+}, {
+  color: 'warning',
+  className: 'text-white'
+}, {
+  color: 'success',
+  className: 'text-white'
+}, {
+  color: 'info',
+  className: 'text-white'
+}, {
+  color: 'action',
+  mode: 'dark',
+  className: 'text-slate-900'
+}];
+
+/**
+ * Foreground for transparent controls: same class names for Button `outline` and `ghost`, and for IconButton `ghost`.
+ * Consumers attach their own `variant` key(s).
+ */
+export const sharedOutlineGhostForegroundTextCompounds = [{
+  color: 'action',
+  className: ['text-slate-900', Platform.select({
+    default: 'data-[active=true]:text-slate-700',
+    web: 'data-[hover=true]:text-slate-800 data-[active=true]:data-[hover=true]:text-slate-700'
+  })]
+}, {
+  color: 'danger',
+  className: ['text-red-600', Platform.select({
+    default: 'data-[active=true]:text-red-800',
+    web: 'data-[hover=true]:text-red-700 data-[active=true]:data-[hover=true]:text-red-800'
+  })]
+}, {
+  color: 'warning',
+  className: ['text-amber-600', Platform.select({
+    default: 'data-[active=true]:text-amber-800',
+    web: 'data-[hover=true]:text-amber-700 data-[active=true]:data-[hover=true]:text-amber-800'
+  })]
+}, {
+  color: 'success',
+  className: ['text-green-600', Platform.select({
+    default: 'data-[active=true]:text-green-800',
+    web: 'data-[hover=true]:text-green-700 data-[active=true]:data-[hover=true]:text-green-800'
+  })]
+}, {
+  color: 'info',
+  className: ['text-sky-600', Platform.select({
+    default: 'data-[active=true]:text-sky-800',
+    web: 'data-[hover=true]:text-sky-700 data-[active=true]:data-[hover=true]:text-sky-800'
+  })]
+}, {
+  color: 'action',
+  mode: 'dark',
+  className: ['text-white', Platform.select({
+    default: 'data-[active=true]:text-white',
+    web: 'data-[hover=true]:text-white data-[active=true]:data-[hover=true]:text-white'
+  })]
+}, {
+  color: 'danger',
+  mode: 'dark',
+  className: 'text-red-400'
+}, {
+  color: 'warning',
+  mode: 'dark',
+  className: 'text-amber-400'
+}, {
+  color: 'success',
+  mode: 'dark',
+  className: 'text-green-400'
+}, {
+  color: 'info',
+  mode: 'dark',
+  className: 'text-sky-400'
+}];
+//# sourceMappingURL=buttonSharedVariants.js.map

package/lib/module/components/Button/buttonSharedVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","SEMANTIC_COLORS","sharedFilledSurfaceCompounds","color","className","action","bg","select","default","web","danger","warning","success","info","mode","sharedGhostSurfaceCompounds","sharedFilledForegroundTextCompounds","sharedOutlineGhostForegroundTextCompounds"],"sourceRoot":"../../../../src","sources":["components/Button/buttonSharedVariants.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Button/index.js

@@ -4,7 +4,8 @@ import { forwardRef } from 'react';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
 import { createButton } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { buttonGroupVariants, buttonRootVariants, buttonSpinnerVariants, buttonTextVariants } from './styles';
+import { Icon } from '../Icon';
+import { buttonGroupVariants, buttonIconVariants, buttonRootVariants, buttonSpinnerVariants, buttonTextVariants } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SCOPE = 'BUTTON';
 const Root = withStyleContext(Pressable, SCOPE);
@@ -22,9 +23,10 @@ const ButtonPrimitive = createButton({
 // =============================================================================
 
 const ButtonRoot = /*#__PURE__*/forwardRef(({
-  variant = 'solid',
-  color = 'primary',
-  size = 'md',
+  variant = 'strong',
+  color = 'action',
+  size = 'default',
+  mode = 'light',
   fullWidth = false,
   className,
   children,
@@ -35,6 +37,7 @@ const ButtonRoot = /*#__PURE__*/forwardRef(({
     variant,
     color,
     size,
+    mode,
     fullWidth
   }), className);
   return /*#__PURE__*/_jsx(ButtonPrimitive, {
@@ -45,6 +48,7 @@ const ButtonRoot = /*#__PURE__*/forwardRef(({
       variant,
       color,
       size,
+      mode,
       fullWidth
     },
     ...props,
@@ -66,12 +70,14 @@ const ButtonLabel = /*#__PURE__*/forwardRef(({
   const {
     variant,
     color,
-    size
+    size,
+    mode
   } = useButtonStyleContext();
   const computedClassName = cn(buttonTextVariants({
     variant,
     color,
-    size
+    size,
+    mode
   }), className);
   return /*#__PURE__*/_jsx(ButtonPrimitive.Text, {
     ref: ref,
@@ -82,6 +88,9 @@ const ButtonLabel = /*#__PURE__*/forwardRef(({
   });
 });
 ButtonLabel.displayName = 'Button.Label';
+
+// TODO: Use ButtonGroupVariantProps
+
 const ButtonGroup = /*#__PURE__*/forwardRef(({
   className,
   children,
@@ -106,18 +115,25 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
   });
 });
 ButtonGroup.displayName = 'Button.Group';
-const ButtonIcon = /*#__PURE__*/forwardRef(({
+const ButtonIcon = ({
   className,
   style,
+  as,
   ...props
-}, ref) => {
-  return /*#__PURE__*/_jsx(ButtonPrimitive.Icon, {
-    ref: ref,
-    className: className,
+}) => {
+  const {
+    size
+  } = useButtonStyleContext();
+  const computedClassName = cn(buttonIconVariants({
+    size
+  }), className);
+  return /*#__PURE__*/_jsx(Icon, {
+    as: as,
+    className: computedClassName,
     style: style,
     ...props
   });
-});
+};
 ButtonIcon.displayName = 'Button.Icon';
 const ButtonSpinner = /*#__PURE__*/forwardRef(({
   className,
@@ -127,11 +143,13 @@ const ButtonSpinner = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const {
     variant,
-    color
+    color,
+    mode
   } = useButtonStyleContext();
   const computedColorClassName = cn(buttonSpinnerVariants({
     variant,
-    color
+    color,
+    mode
   }), colorClassName);
   return /*#__PURE__*/_jsx(ButtonPrimitive.Spinner, {
     ref: ref,