@cdx-ui/components 0.0.1-alpha.9 → 0.0.1-beta.10

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/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,9 @@ const ButtonPrimitive = createButton({
 // =============================================================================
 
 const ButtonRoot = /*#__PURE__*/forwardRef(({
-  variant = 'solid',
-  color = 'primary',
-  size = 'md',
+  variant = 'strong',
+  color = 'action',
+  size = 'default',
   fullWidth = false,
   className,
   children,
@@ -82,6 +83,9 @@ const ButtonLabel = /*#__PURE__*/forwardRef(({
   });
 });
 ButtonLabel.displayName = 'Button.Label';
+
+// TODO: Use ButtonGroupVariantProps
+
 const ButtonGroup = /*#__PURE__*/forwardRef(({
   className,
   children,
@@ -106,18 +110,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,

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","ActivityIndicator","Pressable","Text","View","createButton","cn","useStyleContext","withStyleContext","buttonGroupVariants","buttonRootVariants","buttonSpinnerVariants","buttonTextVariants","jsx","_jsx","SCOPE","Root","useButtonStyleContext","ButtonPrimitive","Group","Spinner","Icon","ButtonRoot","variant","color","size","fullWidth","className","children","style","props","ref","computedClassName","context","displayName","ButtonLabel","ButtonGroup","flexDirection","isAttached","groupClassName","ButtonIcon","ButtonSpinner","colorClassName","computedColorClassName","Button","Object","assign","Label"],"sourceRoot":"../../../../src","sources":["components/Button/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","ActivityIndicator","Pressable","Text","View","createButton","cn","useStyleContext","withStyleContext","Icon","buttonGroupVariants","buttonIconVariants","buttonRootVariants","buttonSpinnerVariants","buttonTextVariants","jsx","_jsx","SCOPE","Root","useButtonStyleContext","ButtonPrimitive","Group","Spinner","ButtonRoot","variant","color","size","fullWidth","className","children","style","props","ref","computedClassName","context","displayName","ButtonLabel","ButtonGroup","flexDirection","isAttached","groupClassName","ButtonIcon","as","ButtonSpinner","colorClassName","computedColorClassName","Button","Object","assign","Label"],"sourceRoot":"../../../../src","sources":["components/Button/index.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -2,278 +2,286 @@
 
 import { Platform } from 'react-native';
 import { cva } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
-// TODO: Split into 2 files
-// TODO: Create cva wrapper
+// TODO: Validate that `dark:` syntax works with Uniwind `ScopedTheme`
 
-export const buttonRootVariants = cva(['flex-row items-center justify-center', 'rounded-md', 'web:outline-none web:focus:outline-none web:focus-visible:outline-none', 'transition-colors duration-150',
-// TODO: Transition not working on mobile
-'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none', 'web:data-[focus-visible=true]:ring-3'], {
+export const buttonRootVariants = cva(['flex-row items-center justify-center', 'rounded-[var(--border-radius-button)]', 'web:outline-none web:focus:outline-none web:focus-visible:outline-none', TRANSITION_COLORS, 'data-[disabled=true]:opacity-[--opacity-disabled]', DISABLED_CURSOR, 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-focus] web:data-[focus-visible=true]:ring-offset-2'], {
   variants: {
     variant: {
-      solid: [],
-      subtle: [],
-      outline: ['bg-transparent border border-neutral-border-strong', 'data-[hover=true]:bg-neutral-background', 'data-[active=true]:bg-neutral-border'],
-      ghost: ['bg-transparent', 'data-[hover=true]:bg-neutral-background', 'data-[active=true]:bg-neutral-border']
+      strong: ['border-b-1 border-black/75'],
+      // TODO: Replace with token
+      outline: ['bg-transparent', 'border border-stroke-primary'],
+      ghost: ['bg-transparent']
     },
     color: {
-      primary: 'web:data-[focus-visible=true]:ring-blue-300/50',
-      secondary: 'web:data-[focus-visible=true]:ring-amber-300/50',
-      success: 'web:data-[focus-visible=true]:ring-green-300/50',
-      danger: 'web:data-[focus-visible=true]:ring-red-300/50'
+      action: [],
+      danger: [],
+      warning: [],
+      success: [],
+      info: []
     },
     size: {
-      sm: 'h-8 px-3 gap-1.5',
-      md: 'h-10 px-4 gap-2',
-      lg: 'h-12 px-6 gap-2.5'
+      default: 'h-10 px-4 gap-2',
+      small: 'h-8 px-3 gap-1.5'
     },
     fullWidth: {
       true: 'w-full',
       false: ''
     }
   },
-  compoundVariants: [{
-    variant: 'solid',
-    color: 'primary',
-    className: ['bg-blue-500', Platform.select({
-      default: 'data-[active=true]:bg-blue-700',
-      web: 'data-[hover=true]:bg-blue-600 data-[active=true]:data-[hover=true]:bg-blue-700'
-    })]
-  }, {
-    variant: 'solid',
-    color: 'secondary',
-    className: ['bg-amber-500', 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'
-    })]
-  }, {
-    variant: 'solid',
-    color: 'success',
-    className: ['bg-green-500', Platform.select({
-      default: 'data-[active=true]:bg-green-700',
-      web: 'data-[hover=true]:bg-green-600 data-[active=true]:data-[hover=true]:bg-green-700'
+  compoundVariants: [
+  // ── strong × color (filled surface) ──────────────────────────────
+  {
+    variant: 'strong',
+    color: 'action',
+    className: ['bg-surface-action-strong', Platform.select({
+      default: 'data-[active=true]:bg-surface-action-strong-active',
+      web: 'data-[hover=true]:bg-surface-action-strong-hover data-[active=true]:data-[hover=true]:bg-surface-action-strong-active'
     })]
   }, {
-    variant: 'solid',
+    variant: 'strong',
     color: 'danger',
-    className: ['bg-red-500', Platform.select({
-      default: 'data-[active=true]:bg-red-700',
-      web: 'data-[hover=true]:bg-red-600 data-[active=true]:data-[hover=true]:bg-red-700'
+    className: ['bg-surface-danger-strong', Platform.select({
+      default: 'data-[active=true]:bg-surface-danger-strong-active',
+      web: 'data-[hover=true]:bg-surface-danger-strong-hover data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active'
     })]
   }, {
-    variant: 'subtle',
-    color: 'primary',
-    className: ['bg-blue-100', Platform.select({
-      default: 'data-[active=true]:bg-blue-200',
-      web: 'data-[hover=true]:bg-blue-200 data-[active=true]:data-[hover=true]:bg-blue-300'
+    variant: 'strong',
+    color: 'warning',
+    className: ['bg-surface-warning-strong', Platform.select({
+      default: 'data-[active=true]:bg-amber-600',
+      web: 'data-[hover=true]:bg-amber-500 data-[active=true]:data-[hover=true]:bg-amber-600'
     })]
   }, {
-    variant: 'subtle',
-    color: 'secondary',
-    className: ['bg-amber-200', Platform.select({
-      default: 'data-[active=true]:bg-amber-300',
-      web: 'data-[hover=true]:bg-amber-300 data-[active=true]:data-[hover=true]:bg-amber-400'
-    })]
-  }, {
-    variant: 'subtle',
+    variant: 'strong',
     color: 'success',
-    className: ['bg-green-200', Platform.select({
-      default: 'data-[active=true]:bg-green-300',
-      web: 'data-[hover=true]:bg-green-300 data-[active=true]:data-[hover=true]:bg-green-400'
+    className: ['bg-surface-success-strong', 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'
     })]
   }, {
-    variant: 'subtle',
-    color: 'danger',
-    className: ['bg-red-200', Platform.select({
-      default: 'data-[active=true]:bg-red-300',
-      web: 'data-[hover=true]:bg-red-300 data-[active=true]:data-[hover=true]:bg-red-400'
+    variant: 'strong',
+    color: 'info',
+    className: ['bg-surface-info-strong', 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'
+    })]
+  },
+  // ── outline × color (border + hover/active surface) ─────────────
+  {
+    variant: 'outline',
+    color: 'action',
+    className: ['border-stroke-action', Platform.select({
+      default: 'data-[active=true]:bg-surface-action-subtle-active',
+      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active'
     })]
   }, {
     variant: 'outline',
-    color: 'primary',
-    className: ['border-blue-500', 'data-[focus-visible=true]:border-blue-500', Platform.select({
-      default: 'data-[active=true]:border-blue-700 data-[active=true]:bg-blue-100',
-      web: 'data-[hover=true]:border-blue-600 data-[hover=true]:bg-blue-100 data-[active=true]:data-[hover=true]:border-blue-700 data-[active=true]:data-[hover=true]:bg-blue-200'
+    color: 'danger',
+    className: ['border-stroke-danger', Platform.select({
+      default: 'data-[active=true]:bg-surface-danger-subtle-active',
+      web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active'
     })]
   }, {
     variant: 'outline',
-    color: 'secondary',
-    className: ['border-amber-500', 'data-[focus-visible=true]:border-amber-500', Platform.select({
-      default: 'data-[active=true]:border-amber-700 data-[active=true]:bg-amber-50',
-      web: 'data-[hover=true]:border-amber-600 data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:border-amber-700 data-[active=true]:data-[hover=true]:bg-amber-100'
+    color: 'warning',
+    className: ['border-stroke-warning', Platform.select({
+      default: 'data-[active=true]:bg-surface-warning-subtle',
+      web: 'data-[hover=true]:bg-surface-warning-tint data-[active=true]:data-[hover=true]:bg-surface-warning-subtle'
     })]
   }, {
     variant: 'outline',
     color: 'success',
-    className: ['border-green-500', 'data-[focus-visible=true]:border-green-500', Platform.select({
-      default: 'data-[active=true]:border-green-700 data-[active=true]:bg-green-100',
-      web: 'data-[hover=true]:border-green-600 data-[hover=true]:bg-green-100 data-[active=true]:data-[hover=true]:border-green-700 data-[active=true]:data-[hover=true]:bg-green-200'
+    className: ['border-stroke-success', Platform.select({
+      default: 'data-[active=true]:bg-surface-success-subtle',
+      web: 'data-[hover=true]:bg-surface-success-tint data-[active=true]:data-[hover=true]:bg-surface-success-subtle'
     })]
   }, {
     variant: 'outline',
-    color: 'danger',
-    className: ['border-red-500', 'data-[focus-visible=true]:border-red-500', Platform.select({
-      default: 'data-[active=true]:border-red-700 data-[active=true]:bg-red-100',
-      web: 'data-[hover=true]:border-red-600 data-[hover=true]:bg-red-100 data-[active=true]:data-[hover=true]:border-red-700 data-[active=true]:data-[hover=true]:bg-red-200'
+    color: 'info',
+    className: ['border-stroke-info', Platform.select({
+      default: 'data-[active=true]:bg-surface-info-subtle',
+      web: 'data-[hover=true]:bg-surface-info-tint data-[active=true]:data-[hover=true]:bg-surface-info-subtle'
+    })]
+  },
+  // ── ghost × color (hover/active surface fills) ──────────────────
+  {
+    variant: 'ghost',
+    color: 'action',
+    className: [Platform.select({
+      default: 'data-[active=true]:bg-surface-action-subtle-active',
+      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active'
     })]
   }, {
     variant: 'ghost',
-    color: 'primary',
-    className: ['bg-transparent', Platform.select({
-      default: 'data-[active=true]:bg-blue-100',
-      web: 'data-[hover=true]:bg-blue-50 data-[active=true]:data-[hover=true]:bg-blue-100'
+    color: 'danger',
+    className: [Platform.select({
+      default: 'data-[active=true]:bg-surface-danger-subtle-active',
+      web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active'
     })]
   }, {
     variant: 'ghost',
-    color: 'secondary',
-    className: ['bg-transparent', 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: 'warning',
+    className: [Platform.select({
+      default: 'data-[active=true]:bg-surface-warning-subtle',
+      web: 'data-[hover=true]:bg-surface-warning-tint data-[active=true]:data-[hover=true]:bg-surface-warning-subtle'
     })]
   }, {
     variant: 'ghost',
     color: 'success',
-    className: ['bg-transparent', 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'
+    className: [Platform.select({
+      default: 'data-[active=true]:bg-surface-success-subtle',
+      web: 'data-[hover=true]:bg-surface-success-tint data-[active=true]:data-[hover=true]:bg-surface-success-subtle'
     })]
   }, {
     variant: 'ghost',
-    color: 'danger',
-    className: ['bg-transparent', 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: 'info',
+    className: [Platform.select({
+      default: 'data-[active=true]:bg-surface-info-subtle',
+      web: 'data-[hover=true]:bg-surface-info-tint data-[active=true]:data-[hover=true]:bg-surface-info-subtle'
     })]
   }],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
-    size: 'md',
+    variant: 'strong',
+    color: 'action',
+    size: 'default',
     fullWidth: false
   }
 });
 export const buttonTextVariants = cva(['font-medium', 'text-center'], {
   variants: {
     variant: {
-      solid: 'text-white',
-      subtle: [],
+      strong: [],
       outline: [],
       ghost: []
     },
     color: {
-      primary: [],
-      secondary: [],
+      action: [],
+      danger: [],
+      warning: [],
       success: [],
-      danger: []
+      info: []
     },
     size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg'
+      default: 'text-base',
+      small: 'text-sm'
     }
   },
-  compoundVariants: [{
-    variant: 'subtle',
-    color: 'primary',
-    className: 'text-blue-950'
+  compoundVariants: [
+  // ── strong × color (filled foreground text) ──────────────────────
+  {
+    variant: 'strong',
+    color: 'action',
+    className: 'text-content-action-on-strong'
   }, {
-    variant: 'subtle',
-    color: 'secondary',
-    className: 'text-amber-950'
+    variant: 'strong',
+    color: 'danger',
+    className: 'text-content-danger-on-strong'
   }, {
-    variant: 'subtle',
+    variant: 'strong',
+    color: 'warning',
+    className: 'text-content-warning-on-strong'
+  }, {
+    variant: 'strong',
     color: 'success',
-    className: 'text-green-950'
+    className: 'text-content-success-on-strong'
   }, {
-    variant: 'subtle',
-    color: 'danger',
-    className: 'text-red-950'
+    variant: 'strong',
+    color: 'info',
+    className: 'text-content-info-on-strong'
+  },
+  // ── outline/ghost × color (transparent foreground text) ──────────
+  {
+    variant: ['outline', 'ghost'],
+    color: 'action',
+    className: 'text-content-action'
   }, {
     variant: ['outline', 'ghost'],
-    color: 'primary',
-    className: ['text-blue-500', Platform.select({
-      default: 'data-[active=true]:text-blue-700',
-      web: 'data-[hover=true]:text-blue-600 data-[active=true]:data-[hover=true]:text-blue-700'
-    })]
+    color: 'danger',
+    className: 'text-content-danger'
   }, {
     variant: ['outline', 'ghost'],
-    color: 'secondary',
-    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: 'warning',
+    className: 'text-content-warning'
   }, {
     variant: ['outline', 'ghost'],
     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'
-    })]
+    className: 'text-content-success'
   }, {
     variant: ['outline', 'ghost'],
-    color: 'danger',
-    className: ['text-red-500', Platform.select({
-      default: 'data-[active=true]:text-red-700',
-      web: 'data-[hover=true]:text-red-600 data-[active=true]:data-[hover=true]:text-red-700'
-    })]
+    color: 'info',
+    className: 'text-content-info'
   }],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
-    size: 'md'
+    variant: 'strong',
+    color: 'action',
+    size: 'default'
   }
 });
 export const buttonSpinnerVariants = cva([], {
   variants: {
     variant: {
-      solid: 'accent-white',
-      subtle: [],
+      strong: [],
       outline: [],
       ghost: []
     },
     color: {
-      primary: [],
-      secondary: [],
+      action: [],
+      danger: [],
+      warning: [],
       success: [],
-      danger: []
+      info: []
     }
   },
-  compoundVariants: [{
-    variant: 'subtle',
-    color: 'primary',
-    className: 'accent-blue-950'
+  compoundVariants: [
+  // ── strong × color ───────────────────────────────────────────────
+  {
+    variant: 'strong',
+    color: 'action',
+    className: 'accent-[var(--color-content-action-on-strong)]'
   }, {
-    variant: 'subtle',
-    color: 'secondary',
-    className: 'accent-amber-950'
+    variant: 'strong',
+    color: 'danger',
+    className: 'accent-[var(--color-content-danger-on-strong)]'
   }, {
-    variant: 'subtle',
+    variant: 'strong',
+    color: 'warning',
+    className: 'accent-[var(--color-content-warning-on-strong)]'
+  }, {
+    variant: 'strong',
     color: 'success',
-    className: 'accent-green-950'
+    className: 'accent-[var(--color-content-success-on-strong)]'
   }, {
-    variant: 'subtle',
-    color: 'danger',
-    className: 'accent-red-950'
+    variant: 'strong',
+    color: 'info',
+    className: 'accent-[var(--color-content-info-on-strong)]'
+  },
+  // ── outline/ghost × color ────────────────────────────────────────
+  {
+    variant: ['outline', 'ghost'],
+    color: 'action',
+    className: 'accent-[var(--color-content-action)]'
   }, {
     variant: ['outline', 'ghost'],
-    color: 'primary',
-    className: 'accent-blue-500'
+    color: 'danger',
+    className: 'accent-[var(--color-content-danger)]'
   }, {
     variant: ['outline', 'ghost'],
-    color: 'secondary',
-    className: 'accent-amber-600'
+    color: 'warning',
+    className: 'accent-[var(--color-content-warning)]'
   }, {
     variant: ['outline', 'ghost'],
     color: 'success',
-    className: 'accent-green-600'
+    className: 'accent-[var(--color-content-success)]'
   }, {
     variant: ['outline', 'ghost'],
-    color: 'danger',
-    className: 'accent-red-500'
+    color: 'info',
+    className: 'accent-[var(--color-content-info)]'
   }],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary'
+    variant: 'strong',
+    color: 'action'
   }
 });
 export const buttonGroupVariants = cva([], {
@@ -306,4 +314,15 @@ export const buttonGroupVariants = cva([], {
     isAttached: false
   }
 });
+export const buttonIconVariants = cva([], {
+  variants: {
+    size: {
+      default: 'size-5',
+      small: 'size-4'
+    }
+  },
+  defaultVariants: {
+    size: 'default'
+  }
+});
 //# sourceMappingURL=styles.js.map