@cdx-ui/components 0.0.1-beta.12 → 0.0.1-beta.121

package/src/components/Select/styles.ts

@@ -1,44 +1,43 @@
 import { Platform } from 'react-native';
 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,
-  RADIUS_MD,
-  SHADOW_SM,
-  SHADOW_MD,
-  SIZE_SCALE,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 // ── Trigger ─────────────────────────────────────────────────
 
 export const selectTriggerVariants = cva(
   [
     'flex w-full min-w-0 flex-row items-center justify-between text-start',
-    RADIUS_SM,
-    SHADOW_SM,
+    'bg-surface-primary',
+    'border border-stroke-primary',
+    'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
-    COLOR_BG_PRIMARY,
-    `border ${COLOR_BORDER_DEFAULT}`,
-    DISABLED_OPACITY,
+    'data-[disabled=true]:bg-surface-secondary',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
-    'data-[state=open]:border-slate-900',
-    'data-[invalid=true]:border-red-500',
-    'data-[readonly=true]:bg-slate-50',
-    Platform.select({
-      default: 'data-[active=true]:border-slate-300',
-      web: [
-        'data-[hover=true]:border-slate-300 data-[active=true]:data-[hover=true]:border-slate-400',
-        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
-        'data-[state=open]:ring-2 data-[state=open]:ring-slate-400/50',
-      ].join(' '),
-    }),
+    'data-[readonly=true]:bg-surface-secondary',
+    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    // Web: inset ring avoids a border-width change so no padding compensation is needed.
+    // Recolor the border to match the ring so the two read as a single focus outline
+    // instead of a gray border + colored ring.
+    'web:data-[focus=true]:ring-inset',
+    'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
+    'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[focus=true]:data-[invalid=false]:border-stroke-action',
+    'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    'web:data-[state=open]:ring-inset',
+    'web:data-[state=open]:ring-[length:var(--border-width-focused)]',
+    'web:data-[state=open]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[state=open]:data-[invalid=false]:border-stroke-action',
+    'web:data-[state=open]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[state=open]:data-[invalid=true]:border-stroke-danger',
+    // Native: thicker border; size variants below compensate the layout shift.
+    'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'native:data-[field-state=focused]:border-stroke-action',
+    'native:data-[field-state=focused-invalid]:border-stroke-danger',
+    'native:data-[state=open]:border-[length:var(--border-width-focused)]',
+    'data-[invalid=true]:border-stroke-danger',
   ],
   {
     variants: {
@@ -46,8 +45,21 @@ export const selectTriggerVariants = cva(
         outline: [],
       },
       size: {
-        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} ${SIZE_SCALE.default.gap}`,
-        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} ${SIZE_SCALE.small.gap}`,
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          // Native only: subtract one hairline so the wider focus border doesn't shift layout.
+          'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'native:data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
+        small: [
+          'h-8 min-h-8 px-3 py-2 gap-1.5',
+          'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+          'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+        ],
       },
     },
     defaultVariants: {
@@ -62,15 +74,15 @@ export const selectTriggerVariants = cva(
 export const selectValueVariants = cva(
   [
     'min-w-0 flex-1 text-start',
-    'data-[placeholder=true]:text-slate-400',
-    'data-[invalid=true]:text-red-600',
-    COLOR_TEXT_PRIMARY,
+    'text-content-primary',
+    'data-[placeholder=true]:text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
   ],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {
@@ -84,14 +96,14 @@ export const selectValueVariants = cva(
 export const selectIconVariants = cva(
   [
     'shrink-0 items-center justify-center self-center',
-    COLOR_TEXT_MUTED,
-    'data-[invalid=true]:text-red-500',
+    'text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
   ],
   {
     variants: {
       size: {
-        default: 'h-5 w-5',
-        small: 'h-4 w-4',
+        default: 'size-5',
+        small: 'size-4',
       },
     },
     defaultVariants: {
@@ -103,12 +115,12 @@ export const selectIconVariants = cva(
 // ── Content ─────────────────────────────────────────────────
 
 export const selectContentVariants = cva([
-  COLOR_BG_PRIMARY,
-  `border ${COLOR_BORDER_DEFAULT}`,
+  'bg-surface-primary',
+  'border border-stroke-secondary',
   'overflow-hidden',
-  RADIUS_MD,
+  'rounded-xl',
   Platform.select({
-    web: SHADOW_MD,
+    web: 'shadow-sm',
     default: '',
   }),
   'max-h-60',
@@ -122,10 +134,10 @@ export const selectItemVariants = cva(
     'flex-row items-center',
     'transition-colors duration-100',
     'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[state=checked]:bg-slate-50 data-[state=checked]:font-medium',
+    'data-[state=checked]:bg-surface-action-tint data-[state=checked]:font-medium',
     Platform.select({
-      default: 'data-[active=true]:bg-slate-100',
-      web: 'data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:bg-slate-100 data-[highlighted=true]:bg-slate-50',
+      default: 'data-[active=true]:bg-surface-action-tint-active',
+      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active data-[highlighted=true]:bg-surface-action-tint-hover',
     }),
   ],
   {
@@ -144,12 +156,12 @@ export const selectItemVariants = cva(
 // ── ItemLabel ───────────────────────────────────────────────
 
 export const selectItemLabelVariants = cva(
-  [COLOR_TEXT_PRIMARY, 'data-[state=checked]:font-medium'],
+  ['text-content-primary', 'data-[state=checked]:font-medium'],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, useEffect } from 'react';
+import { type ViewProps } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '@cdx-ui/utils';
+import { skeletonVariants } from './styles';
+
+export interface SkeletonProps extends ViewProps {
+  className?: string;
+  /** Pulse animation duration in milliseconds. @default 1000 */
+  duration?: number;
+}
+
+export const Skeleton = forwardRef<Animated.View, SkeletonProps>(
+  ({ className, style, duration = 1000, ...props }, ref) => {
+    const opacity = useSharedValue(1);
+
+    useEffect(() => {
+      opacity.set(
+        withRepeat(withTiming(0.35, { duration, easing: Easing.inOut(Easing.ease) }), -1, true),
+      );
+    }, [duration, opacity]);
+
+    // Explicit deps for Vite/web without the Reanimated Babel plugin.
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.get() }), [opacity]);
+
+    return (
+      <Animated.View
+        ref={ref}
+        className={cn(skeletonVariants(), className)}
+        style={[animatedStyle, style]}
+        {...props}
+      />
+    );
+  },
+);
+
+Skeleton.displayName = 'Skeleton';

package/src/components/Skeleton/styles.ts

@@ -0,0 +1,5 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const skeletonVariants = cva(['bg-surface-neutral-subtle', 'rounded-md']);
+
+export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;

package/src/components/Slider/getSliderPopupPosition.ts

@@ -0,0 +1,37 @@
+import { Platform, type ViewStyle } from 'react-native';
+import type { AnchorLayout, SliderOrientation } from '@cdx-ui/primitives';
+
+export const SLIDER_POPUP_OFFSET = 8;
+export const SLIDER_POPUP_Z_INDEX = 9999;
+
+/**
+ * Popover-style placement for the slider value tooltip, modeled after anchored
+ * popover content positioning (placement + offset relative to a measured trigger).
+ */
+export function getSliderPopupAnchorStyle(
+  anchor: AnchorLayout,
+  orientation: SliderOrientation,
+  offset = SLIDER_POPUP_OFFSET,
+): ViewStyle {
+  const position = (Platform.OS === 'web' ? 'fixed' : 'absolute') as ViewStyle['position'];
+
+  if (orientation === 'vertical') {
+    const centerY = anchor.y + anchor.height / 2;
+    return {
+      position,
+      left: anchor.x + anchor.width + offset,
+      top: centerY,
+      zIndex: SLIDER_POPUP_Z_INDEX,
+      transform: [{ translateY: '-50%' }] as ViewStyle['transform'],
+    };
+  }
+
+  const centerX = anchor.x + anchor.width / 2;
+  return {
+    position,
+    left: centerX,
+    top: anchor.y - offset,
+    zIndex: SLIDER_POPUP_Z_INDEX,
+    transform: [{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'],
+  };
+}