@codefast/ui 0.3.11 → 0.3.12-canary.0

package/dist/primitives/progress-circle.js

@@ -1,178 +1,163 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { useId, useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContextScope } from "@radix-ui/react-context";
-//#region src/primitives/progress-circle.tsx
+import { useId, useMemo } from "react";
+/* -----------------------------------------------------------------------------
+ * Context: ProgressCircleProvider
+ * --------------------------------------------------------------------------- */
 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
-	});
+ * 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;
+    // Ensure size and stroke width are non-negative
+    const validSize = Math.max(0, size);
+    const validStrokeWidth = Math.max(0, strokeWidth);
+    const validStartAngle = startAngle % 360;
+    // Validate min and max, swap if min > max
+    let validMin = min;
+    let validMax = max;
+    if (validMin > validMax) {
+        [validMin, validMax] = [validMax, validMin];
+    }
+    // Handle indeterminate state
+    const isIndeterminate = value === null || value === undefined;
+    const clampedValue = isIndeterminate ? undefined : clamp(validMin, validMax, value);
+    const range = validMax - validMin;
+    const percentage = clampedValue !== undefined && range > 0 ? ((clampedValue - validMin) / range) * 100 : 0;
+    const valueText = clampedValue !== undefined && formatValue
+        ? formatValue(clampedValue)
+        : `${Math.round(percentage).toString()}%`;
+    // Sort thresholds by value
+    const sortedThresholds = useMemo(() => thresholds && thresholds.length > 0
+        ? [...thresholds].toSorted((a, b) => a.value - b.value)
+        : [], [thresholds]);
+    // Determine an active threshold based on a clamped value
+    const threshold = useMemo(() => {
+        if (clampedValue === undefined) {
+            return;
+        }
+        for (const sortedThreshold of sortedThresholds) {
+            if (clampedValue <= sortedThreshold.value) {
+                return sortedThreshold;
+            }
+        }
+        return sortedThresholds.at(-1);
+    }, [sortedThresholds, clampedValue]);
+    // Calculate circle properties
+    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 (_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 }));
 }
 /**
-* Root component for the progress circle
-*
-* Serves as a wrapper for other progress circle components.
-*/
+ * 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 _jsx("div", { ...props });
 }
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleSVG
+ * --------------------------------------------------------------------------- */
 const PROGRESS_CIRCLE_SVG_NAME = "ProgressCircleSVG";
 /**
-* SVG container for the progress circle
-*
-* Renders the SVG with accessibility attributes and supports indeterminate state.
-*/
+ * 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 { clampedValue, id, max, min, size, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_SVG_NAME, __scopeProgressCircle);
+    return (_jsx("svg", { "aria-label": "Progress", "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": clampedValue, "aria-valuetext": clampedValue === undefined ? undefined : valueText, height: size, id: id, role: "progressbar", viewBox: `0 0 ${size.toString()} ${size.toString()}`, width: size, ...props }));
 }
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleTrack
+ * --------------------------------------------------------------------------- */
 const PROGRESS_CIRCLE_TRACK_NAME = "ProgressCircleTrack";
 /**
-* Background circle for the progress indicator
-*
-* Renders the static track of the progress circle.
-*/
+ * 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 { center, radius, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_TRACK_NAME, __scopeProgressCircle);
+    return (_jsx("circle", { cx: center, cy: center, fill: "transparent", r: radius, stroke: threshold?.background ?? "currentColor", strokeWidth: strokeWidth, ...props }));
 }
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleIndicator
+ * --------------------------------------------------------------------------- */
 const PROGRESS_CIRCLE_INDICATOR_NAME = "ProgressCircleIndicator";
 /**
-* Foreground circle showing progress
-*
-* Renders the dynamic progress indicator with stroke dash properties.
-*/
+ * 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 { center, circumference, radius, rotationTransform, strokeDashoffset, strokeWidth, threshold, } = useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
+    return (_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 }));
 }
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleValue
+ * --------------------------------------------------------------------------- */
 const PROGRESS_CIRCLE_VALUE_NAME = "ProgressCircleValue";
 /**
-* Displays the current progress value
-*
-* Supports custom content or default value text rendering.
-*/
+ * 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
-	});
+    const { clampedValue, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_VALUE_NAME, __scopeProgressCircle);
+    if (typeof children === "function") {
+        return children({ value: clampedValue, valueText });
+    }
+    return _jsx("div", { ...props, children: children ?? valueText });
 }
+/* -----------------------------------------------------------------------------
+ * Helpers
+ * -------------------------------------------------------------------------- */
 /**
-* 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
-*/
+ * 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));
 }
-//#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 };
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+export { createProgressCircleScope, ProgressCircleIndicator as Indicator, ProgressCircle, ProgressCircleIndicator, ProgressCircleProvider, ProgressCircleSVG, ProgressCircleTrack, ProgressCircleValue, ProgressCircleProvider as Provider, ProgressCircle as Root, ProgressCircleSVG as SVG, ProgressCircleTrack as Track, ProgressCircleValue as Value, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.3.11",
+  "version": "0.3.12-canary.0",
   "description": "Core UI components library built with React and Tailwind CSS",
   "keywords": [
     "components",
@@ -26,16 +26,24 @@
   },
   "files": [
     "dist",
+    "src/css",
     "CHANGELOG.md",
     "README.md",
     "LICENSE"
   ],
   "type": "module",
   "sideEffects": [
-    "./dist/css/**/*.css"
+    "./src/css/**/*.css"
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "imports": {
+    "#*": [
+      "./dist/*",
+      "./dist/*.js",
+      "./dist/*/index.js"
+    ]
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -329,7 +337,7 @@
       "types": "./dist/primitives/progress-circle.d.ts",
       "import": "./dist/primitives/progress-circle.js"
     },
-    "./css/*": "./dist/css/*",
+    "./css/*": "./src/css/*",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -382,7 +390,7 @@
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "@codefast/tailwind-variants": "0.3.11"
+    "@codefast/tailwind-variants": "0.3.12-canary.0"
   },
   "devDependencies": {
     "@swc/core": "^1.15.21",
@@ -401,9 +409,8 @@
     "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"
+    "@codefast/typescript-config": "0.3.12-canary.0"
   },
   "peerDependencies": {
     "@types/react": "^19.0",
@@ -420,13 +427,13 @@
     }
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "check-types": "tsc --noEmit",
     "clean": "rm -rf dist",
-    "dev": "tsdown --watch --no-clean",
+    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:coverage:ci": "jest --coverage --ci",
-    "test:watch": "jest --watch",
-    "typecheck": "tsc --noEmit"
+    "test:watch": "jest --watch"
   }
 }

package/{dist → src}/css/preset.css

@@ -1,6 +1,6 @@
 @import "tw-animate-css";
 
-@source "../**/*.js";
+@source "../../dist/**/*.js";
 
 @custom-variant dark (&:where(.dark, .dark *));