@cdx-ui/components 0.3.5 → 0.3.7

package/src/components/PieChart/styles.ts

@@ -0,0 +1,101 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export type PieChartLegendPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export const pieChartRootVariants = cva('w-full max-w-full gap-4', {
+  variants: {
+    placement: {
+      top: 'items-center',
+      bottom: 'items-center',
+      left: 'flex-row items-center justify-center',
+      right: 'flex-row items-center justify-center',
+    },
+  },
+  defaultVariants: {
+    placement: 'bottom',
+  },
+});
+
+export const pieChartCanvasVariants = cva(
+  'relative shrink-0 items-center justify-center overflow-hidden web:outline-none',
+  {
+    variants: {
+      size: {
+        sm: 'size-40',
+        md: 'size-48',
+        lg: 'size-56',
+        xl: 'size-64',
+      },
+    },
+    defaultVariants: {
+      size: 'lg',
+    },
+  },
+);
+
+export type PieChartLegendLayout = 'wrap' | 'list';
+
+export const pieChartLegendVariants = cva('max-w-full', {
+  variants: {
+    layout: {
+      wrap: 'flex-row flex-wrap items-center justify-center gap-x-4 gap-y-2',
+      list: 'w-full self-stretch',
+      names: 'min-w-0 shrink gap-2',
+    },
+  },
+  defaultVariants: {
+    layout: 'wrap',
+  },
+});
+
+export const pieChartLegendItemVariants = cva('flex-row items-center', {
+  variants: {
+    layout: {
+      wrap: 'gap-1.5',
+      list: 'w-full gap-2 py-2.5',
+      names: 'gap-1.5 py-0.5',
+    },
+    divided: {
+      true: 'border-b border-stroke-secondary',
+      false: '',
+    },
+    interactive: {
+      true: 'rounded-sm web:cursor-pointer web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-[var(--color-stroke-ring)]',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    layout: 'wrap',
+    divided: false,
+    interactive: false,
+  },
+});
+
+export const pieChartLegendLabelVariants = cva('body-sm text-content-primary', {
+  variants: {
+    selected: {
+      true: 'font-medium text-content-primary',
+      false: '',
+    },
+    layout: {
+      wrap: '',
+      list: 'min-w-0 flex-1 font-normal text-content-primary',
+      names: 'font-normal text-content-primary',
+    },
+  },
+  defaultVariants: {
+    selected: false,
+    layout: 'wrap',
+  },
+});
+
+export const pieChartLegendMetaVariants = cva('body-sm font-normal text-content-primary');
+
+export const pieChartLegendShareVariants = cva('body-sm w-12 text-right text-content-primary');
+
+export const pieChartCenterLabelVariants = cva(
+  'body-md text-center font-medium text-content-primary',
+);
+
+export type PieChartRootVariantProps = VariantProps<typeof pieChartCanvasVariants>;
+export type PieChartLegendLabelVariantProps = VariantProps<typeof pieChartLegendLabelVariants>;

package/src/components/ProgressBar/index.tsx

@@ -1,40 +1,92 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { ProgressBarRoot, ProgressBarIndicator, type IProgressProps } from '@cdx-ui/primitives';
-import { cn } from '@cdx-ui/utils';
+import {
+  ProgressBarRoot,
+  ProgressBarIndicator,
+  dataAttributes,
+  mergeDataAttributes,
+  type IProgressProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import {
   progressBarIndicatorVariants,
   progressBarTrackVariants,
+  type ProgressBarIndicatorVariantProps,
   type ProgressBarTrackVariantProps,
 } from './styles';
 
+const SCOPE = 'PROGRESS_BAR';
+
+export type ProgressBarSize = NonNullable<ProgressBarTrackVariantProps['size']>;
+export type ProgressBarColor = NonNullable<ProgressBarIndicatorVariantProps['color']>;
+
+interface ProgressBarStyleContext {
+  size?: ProgressBarSize;
+  color?: ProgressBarColor;
+}
+
+const useProgressBarStyleContext = () => useStyleContext(SCOPE) as ProgressBarStyleContext;
+
 export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
+  /**
+   * Track height. Inherited by `ProgressBar.Indicator` via style context.
+   * @default 'default'
+   */
+  size?: ProgressBarSize;
+  /**
+   * Indicator fill color. Inherited by `ProgressBar.Indicator` via style context.
+   * The track is always `surface-neutral-subtle`.
+   * @default 'action'
+   */
+  color?: ProgressBarColor;
+  /** Additional Uniwind/Tailwind classes, merged after the track's own styles. */
   readonly className?: string;
 }
 
 export interface ProgressBarIndicatorProps extends ViewProps {
+  /** Additional Uniwind/Tailwind classes, merged after the indicator's own styles. */
   readonly className?: string;
 }
 
 const ProgressBarRootComponent = forwardRef<View, ProgressBarProps>(
-  ({ className, style, ...props }, ref) => {
-    const trackClass = cn(progressBarTrackVariants(), className);
+  ({ className, style, size = 'default', color = 'action', children, ...props }, ref) => {
+    const trackClass = cn(progressBarTrackVariants({ size }), className);
+
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { size, color } }), [parent, size, color]);
 
-    return <ProgressBarRoot ref={ref} className={trackClass} style={style} {...props} />;
+    return (
+      <ParentContext.Provider value={ctx}>
+        <ProgressBarRoot
+          ref={ref}
+          className={trackClass}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'progress-bar' }))}
+        >
+          {children}
+        </ProgressBarRoot>
+      </ParentContext.Provider>
+    );
   },
 );
 
 ProgressBarRootComponent.displayName = 'ProgressBar';
 
 const ProgressBarIndicatorComponent = forwardRef<View, ProgressBarIndicatorProps>(
-  ({ className, style, ...props }, ref) => (
-    <ProgressBarIndicator
-      ref={ref}
-      className={cn(progressBarIndicatorVariants(), className)}
-      style={style}
-      {...props}
-    />
-  ),
+  ({ className, style, ...props }, ref) => {
+    const { color } = useProgressBarStyleContext();
+
+    return (
+      <ProgressBarIndicator
+        ref={ref}
+        className={cn(progressBarIndicatorVariants({ color }), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'progress-bar-indicator' }))}
+      />
+    );
+  },
 );
 
 ProgressBarIndicatorComponent.displayName = 'ProgressBar.Indicator';

package/src/components/ProgressBar/styles.ts

@@ -1,9 +1,40 @@
 import { cva, type VariantProps } from '@cdx-ui/utils';
 
-export const progressBarTrackVariants = cva([
-  'w-full flex-row overflow-hidden rounded-full bg-surface-action-subtle h-1',
-]);
+export const progressBarTrackVariants = cva(
+  ['w-full flex-row overflow-hidden rounded-full bg-surface-neutral-subtle'],
+  {
+    variants: {
+      size: {
+        default: 'h-1.5',
+        large: 'h-2',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
 
-export const progressBarIndicatorVariants = cva(['rounded-full bg-surface-action-strong']);
+export const progressBarIndicatorVariants = cva(['rounded-full'], {
+  variants: {
+    color: {
+      action: 'bg-surface-action-strong',
+      danger: 'bg-surface-danger-strong',
+      warning: 'bg-surface-warning-strong',
+      success: 'bg-surface-success-strong',
+      info: 'bg-surface-info-strong',
+      'categorical-1': 'bg-chart-categorical-1',
+      'categorical-2': 'bg-chart-categorical-2',
+      'categorical-3': 'bg-chart-categorical-3',
+      'categorical-4': 'bg-chart-categorical-4',
+      'categorical-5': 'bg-chart-categorical-5',
+      'categorical-6': 'bg-chart-categorical-6',
+    },
+  },
+  defaultVariants: {
+    color: 'action',
+  },
+});
 
 export type ProgressBarTrackVariantProps = VariantProps<typeof progressBarTrackVariants>;
+export type ProgressBarIndicatorVariantProps = VariantProps<typeof progressBarIndicatorVariants>;

package/src/components/ProgressCircle/ProgressCircleRing.tsx

@@ -7,12 +7,12 @@ import Animated, {
   withRepeat,
   withTiming,
 } from 'react-native-reanimated';
-import { Circle, Svg } from 'react-native-svg';
 import { useProgressContext } from '@cdx-ui/primitives';
+import { ProgressRing } from './ProgressRing';
 import { PROGRESS_CIRCLE_DIMENSIONS, type ProgressCircleSize } from './styles';
 import { useProgressCircleColors } from './useProgressCircleColors';
 
-const INDETERMINATE_ARC_RATIO = 0.25;
+const INDETERMINATE_ARC_PERCENT = 25;
 const ROTATION_DURATION_MS = 1000;
 
 export interface ProgressCircleRingProps {
@@ -25,9 +25,6 @@ export function ProgressCircleRing({ size = 'large', color = 'default' }: Progre
   const ringColors = useProgressCircleColors(color);
   const rotation = useSharedValue(0);
   const { size: dimension, strokeWidth } = PROGRESS_CIRCLE_DIMENSIONS[size];
-  const radius = (dimension - strokeWidth) / 2;
-  const center = dimension / 2;
-  const circumference = 2 * Math.PI * radius;
   const isIndeterminate = state === 'indeterminate';
 
   useEffect(() => {
@@ -55,41 +52,15 @@ export function ProgressCircleRing({ size = 'large', color = 'default' }: Progre
     [rotation],
   );
 
-  const progressLength = isIndeterminate
-    ? circumference * INDETERMINATE_ARC_RATIO
-    : (circumference * percent) / 100;
-  const gapLength = circumference - progressLength;
-
   const ring = (
-    <Svg
-      width={dimension}
-      height={dimension}
-      viewBox={`0 0 ${String(dimension)} ${String(dimension)}`}
-    >
-      <Circle
-        cx={center}
-        cy={center}
-        r={radius}
-        stroke={ringColors.track}
-        strokeWidth={strokeWidth}
-        fill="none"
-        opacity={ringColors.trackOpacity}
-      />
-      {progressLength > 0 ? (
-        <Circle
-          cx={center}
-          cy={center}
-          r={radius}
-          stroke={ringColors.indicator}
-          strokeWidth={strokeWidth}
-          fill="none"
-          strokeDasharray={`${String(progressLength)} ${String(gapLength)}`}
-          strokeLinecap="round"
-          rotation={-90}
-          origin={`${String(center)}, ${String(center)}`}
-        />
-      ) : null}
-    </Svg>
+    <ProgressRing
+      size={dimension}
+      strokeWidth={strokeWidth}
+      value={isIndeterminate ? INDETERMINATE_ARC_PERCENT : percent}
+      trackColor={ringColors.track}
+      indicatorColor={ringColors.indicator}
+      trackOpacity={ringColors.trackOpacity}
+    />
   );
 
   if (isIndeterminate) {

package/src/components/ProgressCircle/ProgressRing.tsx

@@ -0,0 +1,60 @@
+import { Circle, Svg } from 'react-native-svg';
+
+export interface ProgressRingProps {
+  /** Outer diameter in px. */
+  readonly size: number;
+  readonly strokeWidth: number;
+  /** Arc length as a percentage of the circumference, 0–100. */
+  readonly value: number;
+  readonly trackColor: string;
+  readonly indicatorColor: string;
+  /** @default 1 */
+  readonly trackOpacity?: number;
+}
+
+/**
+ * Size-agnostic determinate ring: a full track plus a round-capped arc starting at 12 o'clock.
+ * Internal to `@cdx-ui/components`; shared by `ProgressCircle` and `Stepper.Indicator`.
+ */
+export function ProgressRing({
+  size,
+  strokeWidth,
+  value,
+  trackColor,
+  indicatorColor,
+  trackOpacity = 1,
+}: ProgressRingProps) {
+  const radius = (size - strokeWidth) / 2;
+  const center = size / 2;
+  const circumference = 2 * Math.PI * radius;
+  const progressLength = (circumference * value) / 100;
+  const gapLength = circumference - progressLength;
+
+  return (
+    <Svg width={size} height={size} viewBox={`0 0 ${String(size)} ${String(size)}`}>
+      <Circle
+        cx={center}
+        cy={center}
+        r={radius}
+        stroke={trackColor}
+        strokeWidth={strokeWidth}
+        fill="none"
+        opacity={trackOpacity}
+      />
+      {progressLength > 0 ? (
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={indicatorColor}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={`${String(progressLength)} ${String(gapLength)}`}
+          strokeLinecap="round"
+          rotation={-90}
+          origin={`${String(center)}, ${String(center)}`}
+        />
+      ) : null}
+    </Svg>
+  );
+}

package/src/components/ScrollShadow/useScrollShadow.ts

@@ -98,6 +98,7 @@ export function useScrollShadowTracker({
     canScrollBefore: false,
     canScrollAfter: false,
   });
+  const capabilityRef = useRef(capability);
 
   const updateCapability = useCallback(() => {
     if (!enabled) {
@@ -106,18 +107,18 @@ export function useScrollShadowTracker({
 
     onDistanceChange?.(getScrollDistance(metricsRef.current, offset));
     const nextCapability = getScrollCapability(metricsRef.current, offset);
+    const previousCapability = capabilityRef.current;
 
-    setCapability((prev) => {
-      if (
-        prev.canScrollBefore === nextCapability.canScrollBefore &&
-        prev.canScrollAfter === nextCapability.canScrollAfter
-      ) {
-        return prev;
-      }
-
-      onCapabilityChange?.(nextCapability);
-      return nextCapability;
-    });
+    if (
+      previousCapability.canScrollBefore === nextCapability.canScrollBefore &&
+      previousCapability.canScrollAfter === nextCapability.canScrollAfter
+    ) {
+      return;
+    }
+
+    capabilityRef.current = nextCapability;
+    setCapability(nextCapability);
+    onCapabilityChange?.(nextCapability);
   }, [enabled, offset, onCapabilityChange, onDistanceChange]);
 
   useEffect(() => {

package/src/components/Select/index.tsx

@@ -273,6 +273,8 @@ export interface SelectIconProps extends Omit<IconProps, 'children' | 'as' | 'co
    * Omit to apply the symmetric baseline gap.
    */
   position?: IconSlotPosition;
+  /** The element rendered when `asChild` is set. */
+  children?: ReactNode;
 }
 
 const SelectIcon = ({ asChild, className, style, as, position, ...props }: SelectIconProps) => {