@cdx-ui/components 0.3.5 → 0.3.6

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/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(() => {