@codefast/ui 0.3.11 → 0.3.12-canary.1

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.1",
   "description": "Core UI components library built with React and Tailwind CSS",
   "keywords": [
     "components",
@@ -26,16 +26,29 @@
   },
   "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",
+      "./src/*",
+      "./src/*.ts",
+      "./src/*.tsx",
+      "./src/*/index.ts",
+      "./src/*/index.tsx"
+    ]
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -329,7 +342,11 @@
       "types": "./dist/primitives/progress-circle.d.ts",
       "import": "./dist/primitives/progress-circle.js"
     },
-    "./css/*": "./dist/css/*",
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./css/*": "./src/css/*",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -373,19 +390,19 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.14.0",
-    "react-hook-form": "^7.72.0",
-    "react-resizable-panels": "^4.7.6",
+    "react-hook-form": "^7.72.1",
+    "react-resizable-panels": "^4.10.0",
     "recharts": "^3.8.1",
     "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.1"
   },
   "devDependencies": {
-    "@swc/core": "^1.15.21",
+    "@swc/core": "^1.15.24",
     "@swc/jest": "^0.2.39",
     "@tailwindcss/postcss": "^4.2.2",
     "@testing-library/dom": "^10.4.1",
@@ -394,16 +411,16 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.6.0",
+    "@typescript/native-preview": "7.0.0-dev.20260411.1",
     "jest": "^30.3.0",
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.3.0",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.9",
     "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.1"
   },
   "peerDependencies": {
     "@types/react": "^19.0",
@@ -420,13 +437,13 @@
     }
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "rm -rf dist && tsgo -p tsconfig.build.json",
+    "check-types": "tsgo --noEmit",
     "clean": "rm -rf dist",
-    "dev": "tsdown --watch --no-clean",
+    "dev": "tsgo -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,9 +1,86 @@
 @import "tw-animate-css";
 
-@source "../**/*.js";
+@source "../../dist/**/*.js";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+@custom-variant data-horizontal (&:where([data-orientation="horizontal"]));
+
+@custom-variant data-vertical (&:where([data-orientation="vertical"]));
+
+@custom-variant data-side-top (&:where([data-side="top"]));
+
+@custom-variant data-side-right (&:where([data-side="right"]));
+
+@custom-variant data-side-bottom (&:where([data-side="bottom"]));
+
+@custom-variant data-side-left (&:where([data-side="left"]));
+
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-state="selected"]),
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-focused {
+  &:where([data-focused="true"]),
+  &:where([data-focused]:not([data-focused="false"])) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 :root {
   --radius: 0.375rem;
 }
@@ -52,14 +129,14 @@
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
 
-  --radius-xs: max(0px, calc(var(--radius) - 4px));
-  --radius-sm: max(0px, calc(var(--radius) - 2px));
+  --radius-xs: calc(var(--radius) * 2 / 6);
+  --radius-sm: calc(var(--radius) * 4 / 6);
   --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 6px);
-  --radius-3xl: calc(var(--radius) + 8px);
-  --radius-4xl: calc(var(--radius) + 10px);
+  --radius-lg: calc(var(--radius) * 8 / 6);
+  --radius-xl: calc(var(--radius) * 12 / 6);
+  --radius-2xl: calc(var(--radius) * 16 / 6);
+  --radius-3xl: calc(var(--radius) * 24 / 6);
+  --radius-4xl: calc(var(--radius) * 32 / 6);
 }
 
 @theme {
@@ -73,7 +150,7 @@
   ::backdrop,
   ::file-selector-button {
     border-color: var(--color-border);
-    outline-color: color-mix(in oklab, var(--color-ring) 20%, transparent);
+    outline-color: --alpha(var(--color-ring) / 20%);
   }
 
   ::-webkit-scrollbar {