@codefast/ui 0.3.11-canary.1 → 0.3.11

package/dist/primitives/progress-circle.js

@@ -1,129 +1,178 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContextScope } from "@radix-ui/react-context";
 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 isIndeterminate = null == value;
-    const clampedValue = isIndeterminate ? void 0 : clamp(validMin, validMax, value);
-    const range = validMax - validMin;
-    const percentage = void 0 !== clampedValue && range > 0 ? (clampedValue - validMin) / range * 100 : 0;
-    const valueText = void 0 !== clampedValue && 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 (void 0 === clampedValue) 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: center,
-        circumference: circumference,
-        clampedValue: clampedValue,
-        id: id,
-        max: validMax,
-        min: validMin,
-        radius: radius,
-        rotationTransform: rotationTransform,
-        scope: __scopeProgressCircle,
-        size: validSize,
-        strokeDashoffset: strokeDashoffset,
-        strokeWidth: validStrokeWidth,
-        threshold: threshold,
-        value: value ?? 0,
-        valueText: valueText,
-        children: children
-    });
+	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
-    });
+	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": void 0 === clampedValue ? void 0 : valueText,
-        height: size,
-        id: id,
-        role: "progressbar",
-        viewBox: `0 0 ${size.toString()} ${size.toString()}`,
-        width: size,
-        ...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: strokeWidth,
-        ...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: strokeDashoffset,
-        strokeLinecap: "round",
-        strokeWidth: strokeWidth,
-        transform: rotationTransform,
-        ...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 ("function" == typeof children) return children({
-        value: clampedValue,
-        valueText
-    });
-    return /*#__PURE__*/ jsx("div", {
-        ...props,
-        children: children ?? valueText
-    });
+	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));
+	return Math.min(max, Math.max(min, value));
 }
-export { ProgressCircleIndicator as Indicator, ProgressCircle, ProgressCircleIndicator, ProgressCircleProvider, ProgressCircleSVG, ProgressCircleTrack, ProgressCircleValue, ProgressCircleProvider as Provider, ProgressCircle as Root, ProgressCircleSVG as SVG, ProgressCircleTrack as Track, ProgressCircleValue as Value, createProgressCircleScope };
+//#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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.3.11-canary.1",
+  "version": "0.3.11",
   "description": "Core UI components library built with React and Tailwind CSS",
   "keywords": [
     "components",
@@ -382,11 +382,9 @@
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "@codefast/tailwind-variants": "0.3.11-canary.1"
+    "@codefast/tailwind-variants": "0.3.11"
   },
   "devDependencies": {
-    "@rsbuild/plugin-react": "^1.4.6",
-    "@rslib/core": "0.19.1",
     "@swc/core": "^1.15.21",
     "@swc/jest": "^0.2.39",
     "@tailwindcss/postcss": "^4.2.2",
@@ -403,8 +401,9 @@
     "postcss": "^8.5.8",
     "tailwindcss": "^4.2.2",
     "ts-node": "^10.9.2",
+    "tsdown": "^0.21.7",
     "typescript": "^6.0.2",
-    "@codefast/typescript-config": "0.3.11-canary.1"
+    "@codefast/typescript-config": "0.3.11"
   },
   "peerDependencies": {
     "@types/react": "^19.0",
@@ -421,9 +420,9 @@
     }
   },
   "scripts": {
-    "build": "rslib build",
+    "build": "tsdown",
     "clean": "rm -rf dist",
-    "dev": "rslib build --watch",
+    "dev": "tsdown --watch --no-clean",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:coverage:ci": "jest --coverage --ci",