@codefast/ui 0.3.13-canary.3 → 0.3.13

package/dist/primitives/progress-circle.d.mts

@@ -0,0 +1,146 @@
+import { ComponentProps, ReactNode } from "react";
+import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
+import { Scope } from "@radix-ui/react-context";
+
+//#region src/primitives/progress-circle.d.ts
+type ScopedProps<P> = P & {
+  __scopeProgressCircle?: Scope;
+};
+/**
+ * Defines color thresholds based on progress values
+ */
+interface Threshold {
+  /**
+   * Background color to be applied
+   */
+  background: string;
+  /**
+   * Foreground color to be applied
+   */
+  color: string;
+  /**
+   * The value at which this threshold becomes active
+   */
+  value: number;
+}
+declare const createProgressCircleScope: _$_radix_ui_react_context0.CreateScope;
+interface ProgressCircleProviderProps {
+  /** React children to be rendered inside the progress circle */
+  children: ReactNode;
+  /** Custom function to format the numeric value for display */
+  formatValue?: (value: number) => string;
+  /** Unique identifier for the progress circle component */
+  id?: string;
+  /** Maximum value of the progress (defaults to 100) */
+  max?: number;
+  /** Minimum value of the progress (defaults to 0) */
+  min?: number;
+  /** Size of the progress circle in pixels */
+  size?: number;
+  /** Starting angle of the progress circle in degrees (0 = top) */
+  startAngle?: number;
+  /** Width of the progress circle's stroke in pixels */
+  strokeWidth?: number;
+  /** Array of threshold configurations for different value ranges */
+  thresholds?: Threshold[];
+  /** Current progress value (null for indeterminate state) */
+  value?: null | number;
+}
+/**
+ * Provides context for the ProgressCircle component
+ *
+ * Manages calculations for rendering the circular progress indicator,
+ * including value clamping, sizing, thresholds, and indeterminate state.
+ *
+ * @example
+ * ```tsx
+ * <ProgressCircleProvider
+ *   value={75}
+ *   min={0}
+ *   max={100}
+ *   size={64}
+ *   thresholds={[
+ *     { value: 30, color: 'red', background: 'pink' },
+ *     { value: 70, color: 'yellow', background: 'lightyellow' },
+ *     { value: 100, color: 'green', background: 'lightgreen' }
+ *   ]}
+ * >
+ *   <ProgressCircleSVG>
+ *     <ProgressCircleIndicator />
+ *     <ProgressCircleTrack />
+ *   </ProgressCircleSVG>
+ *   <ProgressCircleValue />
+ * </ProgressCircleProvider>
+ * ```
+ */
+declare function ProgressCircleProvider({
+  __scopeProgressCircle,
+  children,
+  formatValue,
+  id: propertyId,
+  max,
+  min,
+  size,
+  startAngle,
+  strokeWidth,
+  thresholds,
+  value
+}: ScopedProps<ProgressCircleProviderProps>): ReactNode;
+type ProgressCircleProps = ComponentProps<"div">;
+/**
+ * Root component for the progress circle
+ *
+ * Serves as a wrapper for other progress circle components.
+ */
+declare function ProgressCircle({
+  __scopeProgressCircle,
+  ...props
+}: ScopedProps<ProgressCircleProps>): ReactNode;
+type ProgressCircleSVGProps = ComponentProps<"svg">;
+/**
+ * SVG container for the progress circle
+ *
+ * Renders the SVG with accessibility attributes and supports indeterminate state.
+ */
+declare function ProgressCircleSVG({
+  __scopeProgressCircle,
+  ...props
+}: ScopedProps<ProgressCircleSVGProps>): ReactNode;
+type ProgressCircleTrackProps = ComponentProps<"circle">;
+/**
+ * Background circle for the progress indicator
+ *
+ * Renders the static track of the progress circle.
+ */
+declare function ProgressCircleTrack({
+  __scopeProgressCircle,
+  ...props
+}: ScopedProps<ProgressCircleTrackProps>): ReactNode;
+type ProgressCircleIndicatorProps = ComponentProps<"circle">;
+/**
+ * Foreground circle showing progress
+ *
+ * Renders the dynamic progress indicator with stroke dash properties.
+ */
+declare function ProgressCircleIndicator({
+  __scopeProgressCircle,
+  ...props
+}: ScopedProps<ProgressCircleIndicatorProps>): ReactNode;
+interface ProgressCircleValueProps extends Omit<ComponentProps<"div">, "children"> {
+  children?: ((context: {
+    value: number | undefined;
+    valueText: string;
+  }) => ReactNode) | ReactNode;
+}
+/**
+ * Displays the current progress value
+ *
+ * Supports custom content or default value text rendering.
+ */
+declare function ProgressCircleValue({
+  __scopeProgressCircle,
+  children,
+  ...props
+}: ScopedProps<ProgressCircleValueProps>): ReactNode;
+//#endregion
+export { ProgressCircleIndicator as Indicator, ProgressCircleIndicator, ProgressCircle, ProgressCircle as Root, type ProgressCircleIndicatorProps, type ProgressCircleProps, ProgressCircleProvider, ProgressCircleProvider as Provider, type ProgressCircleProviderProps, ProgressCircleSVG, ProgressCircleSVG as SVG, type ProgressCircleSVGProps, ProgressCircleTrack, ProgressCircleTrack as Track, type ProgressCircleTrackProps, ProgressCircleValue, ProgressCircleValue as Value, type ProgressCircleValueProps, createProgressCircleScope };

package/dist/primitives/progress-circle.mjs

@@ -0,0 +1,178 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { createContextScope } from "@radix-ui/react-context";
+//#region src/primitives/progress-circle.tsx
+const PROGRESS_CIRCLE_PROVIDER_NAME = "ProgressCircleProvider";
+const [createProgressCircleContext, createProgressCircleScope] = createContextScope(PROGRESS_CIRCLE_PROVIDER_NAME);
+const [ProgressCircleContextProvider, useProgressCircleContext] = createProgressCircleContext(PROGRESS_CIRCLE_PROVIDER_NAME);
+/**
+* Provides context for the ProgressCircle component
+*
+* Manages calculations for rendering the circular progress indicator,
+* including value clamping, sizing, thresholds, and indeterminate state.
+*
+* @example
+* ```tsx
+* <ProgressCircleProvider
+*   value={75}
+*   min={0}
+*   max={100}
+*   size={64}
+*   thresholds={[
+*     { value: 30, color: 'red', background: 'pink' },
+*     { value: 70, color: 'yellow', background: 'lightyellow' },
+*     { value: 100, color: 'green', background: 'lightgreen' }
+*   ]}
+* >
+*   <ProgressCircleSVG>
+*     <ProgressCircleIndicator />
+*     <ProgressCircleTrack />
+*   </ProgressCircleSVG>
+*   <ProgressCircleValue />
+* </ProgressCircleProvider>
+* ```
+*/
+function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max = 100, min = 0, size = 48, startAngle = -90, strokeWidth = 4, thresholds, value }) {
+	const uniqueId = useId();
+	const id = propertyId ?? uniqueId;
+	const validSize = Math.max(0, size);
+	const validStrokeWidth = Math.max(0, strokeWidth);
+	const validStartAngle = startAngle % 360;
+	let validMin = min;
+	let validMax = max;
+	if (validMin > validMax) [validMin, validMax] = [validMax, validMin];
+	const clampedValue = value === null || value === void 0 ? void 0 : clamp(validMin, validMax, value);
+	const range = validMax - validMin;
+	const percentage = clampedValue !== void 0 && range > 0 ? (clampedValue - validMin) / range * 100 : 0;
+	const valueText = clampedValue !== void 0 && formatValue ? formatValue(clampedValue) : `${Math.round(percentage).toString()}%`;
+	const sortedThresholds = useMemo(() => thresholds && thresholds.length > 0 ? [...thresholds].toSorted((a, b) => a.value - b.value) : [], [thresholds]);
+	const threshold = useMemo(() => {
+		if (clampedValue === void 0) return;
+		for (const sortedThreshold of sortedThresholds) if (clampedValue <= sortedThreshold.value) return sortedThreshold;
+		return sortedThresholds.at(-1);
+	}, [sortedThresholds, clampedValue]);
+	const center = validSize / 2;
+	const radius = Math.max(0, center - validStrokeWidth / 2);
+	const circumference = 2 * Math.PI * radius;
+	const strokeDashoffset = circumference - percentage / 100 * circumference;
+	const rotationTransform = `rotate(${validStartAngle.toString()}, 0, 0)`;
+	return /* @__PURE__ */ jsx(ProgressCircleContextProvider, {
+		center,
+		circumference,
+		clampedValue,
+		id,
+		max: validMax,
+		min: validMin,
+		radius,
+		rotationTransform,
+		scope: __scopeProgressCircle,
+		size: validSize,
+		strokeDashoffset,
+		strokeWidth: validStrokeWidth,
+		threshold,
+		value: value ?? 0,
+		valueText,
+		children
+	});
+}
+/**
+* Root component for the progress circle
+*
+* Serves as a wrapper for other progress circle components.
+*/
+function ProgressCircle({ __scopeProgressCircle, ...props }) {
+	return /* @__PURE__ */ jsx("div", { ...props });
+}
+const PROGRESS_CIRCLE_SVG_NAME = "ProgressCircleSVG";
+/**
+* SVG container for the progress circle
+*
+* Renders the SVG with accessibility attributes and supports indeterminate state.
+*/
+function ProgressCircleSVG({ __scopeProgressCircle, ...props }) {
+	const { clampedValue, id, max, min, size, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_SVG_NAME, __scopeProgressCircle);
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-label": "Progress",
+		"aria-valuemax": max,
+		"aria-valuemin": min,
+		"aria-valuenow": clampedValue,
+		"aria-valuetext": clampedValue === void 0 ? void 0 : valueText,
+		height: size,
+		id,
+		role: "progressbar",
+		viewBox: `0 0 ${size.toString()} ${size.toString()}`,
+		width: size,
+		...props
+	});
+}
+const PROGRESS_CIRCLE_TRACK_NAME = "ProgressCircleTrack";
+/**
+* Background circle for the progress indicator
+*
+* Renders the static track of the progress circle.
+*/
+function ProgressCircleTrack({ __scopeProgressCircle, ...props }) {
+	const { center, radius, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_TRACK_NAME, __scopeProgressCircle);
+	return /* @__PURE__ */ jsx("circle", {
+		cx: center,
+		cy: center,
+		fill: "transparent",
+		r: radius,
+		stroke: threshold?.background ?? "currentColor",
+		strokeWidth,
+		...props
+	});
+}
+const PROGRESS_CIRCLE_INDICATOR_NAME = "ProgressCircleIndicator";
+/**
+* Foreground circle showing progress
+*
+* Renders the dynamic progress indicator with stroke dash properties.
+*/
+function ProgressCircleIndicator({ __scopeProgressCircle, ...props }) {
+	const { center, circumference, radius, rotationTransform, strokeDashoffset, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
+	return /* @__PURE__ */ jsx("circle", {
+		cx: center,
+		cy: center,
+		fill: "transparent",
+		r: radius,
+		stroke: threshold?.color ?? "currentColor",
+		strokeDasharray: circumference,
+		strokeDashoffset,
+		strokeLinecap: "round",
+		strokeWidth,
+		transform: rotationTransform,
+		...props
+	});
+}
+const PROGRESS_CIRCLE_VALUE_NAME = "ProgressCircleValue";
+/**
+* Displays the current progress value
+*
+* Supports custom content or default value text rendering.
+*/
+function ProgressCircleValue({ __scopeProgressCircle, children, ...props }) {
+	const { clampedValue, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_VALUE_NAME, __scopeProgressCircle);
+	if (typeof children === "function") return children({
+		value: clampedValue,
+		valueText
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		children: children ?? valueText
+	});
+}
+/**
+* Clamps a value within a specified min/max range
+*
+* @param min - Minimum value
+* @param max - Maximum value
+* @param value - Value to clamp
+* @returns Clamped value
+*/
+function clamp(min, max, value) {
+	return Math.min(max, Math.max(min, value));
+}
+//#endregion
+export { ProgressCircleIndicator as Indicator, ProgressCircleIndicator, ProgressCircle, ProgressCircle as Root, ProgressCircleProvider, ProgressCircleProvider as Provider, ProgressCircleSVG, ProgressCircleSVG as SVG, ProgressCircleTrack, ProgressCircleTrack as Track, ProgressCircleValue, ProgressCircleValue as Value, createProgressCircleScope };