@cdx-ui/components 0.0.1-alpha.33 → 0.0.1-alpha.35

package/src/components/Input/styles.ts

@@ -1,45 +1,35 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_MUTED,
-  COLOR_TEXT_PRIMARY,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  RADIUS_SM,
-  SHADOW_SM,
-  SIZE_SCALE,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 export const inputRootVariants = cva(
   [
-    'w-full flex-row items-stretch border',
-    COLOR_BG_PRIMARY,
-    COLOR_BORDER_DEFAULT,
-    RADIUS_SM,
-    SHADOW_SM,
+    'w-full flex-row items-stretch overflow-hidden',
+    'bg-surface-primary',
+    'border-solid border-[length:var(--border-width-default)] border-stroke-primary',
+    'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
-    DISABLED_OPACITY,
+    'data-[disabled=true]:bg-surface-secondary',
+    'data-[disabled=true]:opacity-[--opacity-disabled]',
     DISABLED_CURSOR,
-    'data-[disabled=true]:bg-slate-50 data-[disabled=true]:border-slate-300',
     'data-[readonly=true]:cursor-default',
-    'data-[readonly=true]:bg-slate-50',
-    'web:data-[hover=true]:data-[active=false]:border-slate-300',
-    'data-[focus=true]:border-slate-900',
-    'data-[invalid=true]:border-red-500',
+    'data-[readonly=true]:bg-surface-secondary',
+    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    'data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'data-[focus=true]:border-stroke-action',
+    'data-[invalid=true]:border-stroke-danger',
   ],
   {
     variants: {
       variant: {
-        outline: [
-          'web:focus-within:border-slate-900 web:focus-within:ring-2 web:focus-within:ring-slate-400/50 web:focus-within:ring-offset-0',
-          'web:data-[invalid=true]:focus-within:border-red-500 web:data-[invalid=true]:focus-within:ring-2 web:data-[invalid=true]:focus-within:ring-red-400/50',
-        ],
+        outline: [],
       },
       size: {
-        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} py-2 ${SIZE_SCALE.default.gap}`,
-        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} py-1.5 ${SIZE_SCALE.small.gap}`,
+        // TODO: Find a cleaner approach to preventing layout shift when focus border is applied.
+        default: ['h-10 px-4 py-2 gap-2', 'data-[focus=true]:px-[15px] data-[focus=true]:py-[7px]'],
+        small: [
+          'h-8 px-3 py-1.5 gap-1.5',
+          'data-[focus=true]:px-[11px] data-[focus=true]:py-[5px]',
+        ],
       },
     },
     defaultVariants: {
@@ -52,15 +42,16 @@ export const inputRootVariants = cva(
 export const inputFieldVariants = cva(
   [
     'flex-1 justify-center bg-transparent p-0',
-    COLOR_TEXT_PRIMARY,
-    'placeholder:text-slate-400',
+    'font-body text-content-primary',
+    'placeholder:text-content-tertiary',
     'web:outline-none',
+    'tracking-normal',
   ],
   {
     variants: {
       size: {
-        default: 'text-[1rem]',
-        small: 'text-[0.875rem]',
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {
@@ -71,7 +62,7 @@ export const inputFieldVariants = cva(
 
 export const inputSlotVariants = cva(['items-center justify-center self-center']);
 
-export const inputIconVariants = cva([COLOR_TEXT_MUTED], {
+export const inputIconVariants = cva(['text-content-tertiary'], {
   variants: {
     size: {
       default: 'size-5',
@@ -83,6 +74,6 @@ export const inputIconVariants = cva([COLOR_TEXT_MUTED], {
   },
 });
 
-export const inputFieldPlaceholderVariants = cva(['accent-slate-400']);
+export const inputFieldPlaceholderVariants = cva(['accent-content-tertiary']);
 
 export type InputVariantProps = VariantProps<typeof inputRootVariants>;

package/src/components/Link/styles.ts

@@ -1,20 +1,21 @@
-import { Platform } from 'react-native';
-import { cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import { TRANSITION_COLORS } from '../../styles/primitives';
 
+// TODO: Handle visited state
+
 export const linkRootVariants = cva([
   'flex-row items-center gap-1',
   'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
-  'text-blue-600',
-  'underline decoration-slate-300 underline-offset-4',
   TRANSITION_COLORS,
-  Platform.select({
-    web: 'data-[hover=true]:decoration-slate-900',
-    default: '',
-  }),
-  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
+  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+]);
+
+export const linkLabelVariants = cva([
+  'text-content-link',
+  'body-md',
+  'underline underline-offset-4',
 ]);
 
-export const linkLabelVariants = cva(['text-sm font-medium', 'text-blue-600']);
+export const linkIconVariants = cva(['text-content-link', 'size-4']);
 
-export const linkIconVariants = cva(['size-4', 'text-blue-600']);
+export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;

package/src/components/ProgressBar/index.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { createProgress, type IProgressProps } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  progressBarIndicatorVariants,
+  progressBarTrackVariants,
+  type ProgressBarTrackVariantProps,
+} from './styles';
+
+const ProgressPrimitive = createProgress({
+  Root: View,
+  Indicator: View,
+});
+
+export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
+  readonly className?: string;
+}
+
+export interface ProgressBarIndicatorProps extends ViewProps {
+  readonly className?: string;
+}
+
+const ProgressBarRoot = forwardRef<View, ProgressBarProps>(
+  ({ className, style, ...props }, ref) => {
+    const trackClass = cn(progressBarTrackVariants(), className);
+
+    return <ProgressPrimitive ref={ref} className={trackClass} style={style} {...props} />;
+  },
+);
+
+ProgressBarRoot.displayName = 'ProgressBar';
+
+const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
+  ({ className, style, ...props }, ref) => (
+    <ProgressPrimitive.Indicator
+      ref={ref}
+      className={cn(progressBarIndicatorVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+ProgressBarIndicator.displayName = 'ProgressBar.Indicator';
+
+type ProgressBarCompoundComponent = typeof ProgressBarRoot & {
+  Indicator: typeof ProgressBarIndicator;
+};
+
+export const ProgressBar = Object.assign(ProgressBarRoot, {
+  Indicator: ProgressBarIndicator,
+}) as ProgressBarCompoundComponent;

package/src/components/ProgressBar/styles.ts

@@ -0,0 +1,9 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const progressBarTrackVariants = cva([
+  'w-full flex-row overflow-hidden rounded-full bg-surface-action-tint h-1',
+]);
+
+export const progressBarIndicatorVariants = cva(['rounded-full bg-surface-action-strong']);
+
+export type ProgressBarTrackVariantProps = VariantProps<typeof progressBarTrackVariants>;

package/src/components/ProgressSegmented/styles.ts

@@ -1,13 +1,14 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
-export const progressSegmentedVariants = cva(['flex-row gap-1 w-full']);
+export const progressSegmentedVariants = cva(['flex-row gap-1 w-full rounded overflow-hidden']);
 
-export const segmentVariants = cva(['flex-1 h-2 rounded'], {
+export const segmentVariants = cva(['flex-1 h-1'], {
   variants: {
     state: {
-      complete: 'bg-slate-900',
-      incomplete: 'bg-slate-300',
-      inprogress: 'bg-gradient-to-r from-slate-900 from-50% to-slate-300 to-50%',
+      complete: 'bg-surface-action-strong',
+      incomplete: 'bg-surface-action-tint',
+      inprogress:
+        'bg-gradient-to-r from-surface-action-strong from-50% to-surface-action-tint to-50%',
     },
   },
   defaultVariants: {

package/src/components/Text/styles.tsx

@@ -1,10 +1,9 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
 
 export const textStyle = cva(
   [
-    `${COLOR_TEXT_PRIMARY} font-normal`,
+    `text-content-primary font-normal`,
     Platform.select({
       web: 'font-sans my-0 bg-transparent display-inline no-underline',
       default: '',
@@ -13,11 +12,11 @@ export const textStyle = cva(
   {
     variants: {
       size: {
-        xl: 'text-xl',
-        lg: 'text-lg',
-        md: 'text-base',
-        sm: 'text-sm',
-        xs: 'text-xs',
+        xl: 'body-xl',
+        lg: 'body-lg',
+        md: 'body-md',
+        sm: 'body-sm',
+        xs: 'body-xs',
       },
     },
   },

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './Form';
 export * from './Image';
 export * from './Input';
 export * from './Link';
+export * from './ProgressBar';
 export * from './ProgressSegmented';
 export * from './Select';
 export * from './VirtualizedList';

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

@@ -1,200 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sharedOutlineGhostForegroundTextCompounds = exports.sharedGhostSurfaceCompounds = exports.sharedFilledSurfaceCompounds = exports.sharedFilledForegroundTextCompounds = void 0;
-var _reactNative = require("react-native");
-var _primitives = require("../../styles/primitives");
-/**
- * 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`.
- */
-
-/** Root surface: filled semantic background (maps to Button `strong`, IconButton `solid`). */
-const sharedFilledSurfaceCompounds = exports.sharedFilledSurfaceCompounds = [{
-  color: 'action',
-  className: [_primitives.SEMANTIC_COLORS.action.bg, _reactNative.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: [_primitives.SEMANTIC_COLORS.danger.bg, _reactNative.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: [_primitives.SEMANTIC_COLORS.warning.bg, _reactNative.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: [_primitives.SEMANTIC_COLORS.success.bg, _reactNative.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: [_primitives.SEMANTIC_COLORS.info.bg, _reactNative.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', _reactNative.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). */
-const sharedGhostSurfaceCompounds = exports.sharedGhostSurfaceCompounds = [{
-  color: 'danger',
-  className: [_reactNative.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: [_reactNative.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: [_reactNative.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: [_reactNative.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: [_reactNative.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: [_reactNative.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: [_reactNative.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: [_reactNative.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: [_reactNative.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`). */
-const sharedFilledForegroundTextCompounds = exports.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).
- */
-const sharedOutlineGhostForegroundTextCompounds = exports.sharedOutlineGhostForegroundTextCompounds = [{
-  color: 'action',
-  className: ['text-slate-900', _reactNative.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', _reactNative.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', _reactNative.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', _reactNative.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', _reactNative.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', _reactNative.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/commonjs/components/Button/buttonSharedVariants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_primitives","sharedFilledSurfaceCompounds","exports","color","className","SEMANTIC_COLORS","action","bg","Platform","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/buttonSharedVariants.js

@@ -1,195 +0,0 @@
-"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