@codefast/ui 0.3.16-canary.0 → 0.3.16-canary.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @codefast/ui
 
+## 0.3.16-canary.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @codefast/tailwind-variants@0.3.16-canary.1
+
 ## 0.3.16-canary.0
 
 ### Patch Changes

package/dist/components/calendar.mjs

@@ -39,7 +39,7 @@ function Calendar({ buttonVariant = "ghost", captionLayout = "label", className,
 			range_middle: cn("rounded-none", defaultClassNames.range_middle),
 			range_start: cn("rounded-l-md", "bg-accent", defaultClassNames.range_start),
 			root: cn("w-fit", defaultClassNames.root),
-			table: "w-full border-collapse",
+			month_grid: "w-full border-collapse",
 			today: cn("rounded-md", "bg-accent text-accent-foreground", "data-selected:rounded-none", defaultClassNames.today),
 			week: cn("flex w-full", "mt-2", defaultClassNames.week),
 			week_number: cn("text-[0.8rem] text-muted-foreground", "select-none", defaultClassNames.week_number),

package/dist/components/chart.d.mts

@@ -81,7 +81,7 @@ type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType>
   nameKey?: string;
   color?: string | undefined;
   className?: string | undefined;
-  payload?: Payload<TValue, TName>[];
+  payload?: Array<Payload<TValue, TName>>;
 };
 /**
  * @since 0.3.16-canary.0

package/dist/components/field.d.mts

@@ -127,7 +127,7 @@ interface FieldErrorMessage {
  * @since 0.3.16-canary.0
  */
 interface FieldErrorProps extends ComponentProps<"div"> {
-  errors?: (FieldErrorMessage | undefined)[];
+  errors?: Array<FieldErrorMessage | undefined>;
 }
 /**
  * @since 0.3.16-canary.0

package/dist/hooks/use-animated-value.mjs

@@ -3,15 +3,15 @@ import { useEffect, useRef, useState } from "react";
 //#region src/hooks/use-animated-value.ts
 /**
 * Produce a smoothly animated numeric value in response to changes.
-* 
+*
 * Applies a time-based easing (easeOutQuad) between the current and target values
 * over the specified duration. When disabled, the value updates immediately.
-* 
+*
 * @param targetValue - Target number to animate toward; null resolves to 0.
 * @param duration - Animation duration in milliseconds.
 * @param animate - When false, bypasses animation and sets the value directly.
 * @returns The current (rounded) animated value.
-* 
+*
 * @example
 * ```tsx
 * const value = useAnimatedValue(75, 1000, true);

package/dist/hooks/use-copy-to-clipboard.mjs

@@ -3,15 +3,15 @@ import { useState } from "react";
 //#region src/hooks/use-copy-to-clipboard.ts
 /**
 * Provide clipboard copy capability with a transient copied state.
-* 
+*
 * Internally uses the Clipboard API when available and sets a temporary
 * `isCopied` flag for UI feedback. A custom callback may be invoked upon copy.
-* 
+*
 * @param options - Configuration options.
 *   - onCopy: Callback invoked after a successful copy.
 *   - timeout: Duration in milliseconds to keep `isCopied` true. Defaults to 2000.
 * @returns An object with a `copyToClipboard` function and an `isCopied` flag.
-* 
+*
 * @example
 * ```tsx
 * const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1500 });

package/dist/hooks/use-is-mobile.mjs

@@ -3,14 +3,14 @@ import { useMediaQuery } from "./use-media-query.mjs";
 //#region src/hooks/use-is-mobile.ts
 /**
 * Determine whether the current viewport should be treated as mobile.
-* 
+*
 * Uses {@link useMediaQuery} to evaluate a max-width media query derived from the
 * provided breakpoint. By default, widths below 768px are considered mobile.
-* 
+*
 * @param mobileBreakpoint - Pixel width used as the mobile breakpoint. Values strictly
 * less than this breakpoint are treated as mobile. Defaults to 768.
 * @returns true when the viewport width is less than the given breakpoint; otherwise false.
-* 
+*
 * @example
 * ```tsx
 * const isMobile = useIsMobile();

package/dist/hooks/use-media-query.mjs

@@ -3,13 +3,13 @@ import { useEffect, useState } from "react";
 //#region src/hooks/use-media-query.ts
 /**
 * Subscribe to a CSS media query and receive its match state.
-* 
+*
 * Evaluates the query immediately (when supported) and updates on changes
 * via an event listener.
-* 
+*
 * @param query - A valid media query string (e.g., "(max-width: 768px)").
 * @returns true when the media query currently matches; otherwise false.
-* 
+*
 * @example
 * ```tsx
 * const isNarrow = useMediaQuery("(max-width: 768px)");

package/dist/hooks/use-mutation-observer.mjs

@@ -12,15 +12,15 @@ const defaultOptions = {
 };
 /**
 * Observe DOM mutations on a referenced element and invoke a callback.
-* 
+*
 * Attaches a MutationObserver to the provided element reference with the given
 * options and calls the callback whenever mutations occur.
-* 
+*
 * @param ref - Ref to the target HTMLElement to observe.
 * @param callback - Mutation callback invoked with observed records.
 * @param options - Observer configuration. Defaults watch attributes, characterData, childList, subtree.
 * @returns void
-* 
+*
 * @see [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
 *
 * @since 0.3.16-canary.0

package/dist/hooks/use-pagination.d.mts

@@ -54,6 +54,6 @@ declare function usePagination({
   resultsPerPage,
   siblingPagesCount,
   totalResults
-}: UsePaginationProps): (number | string)[];
+}: UsePaginationProps): Array<number | string>;
 //#endregion
 export { ELLIPSIS, UsePaginationProps, usePagination };

package/dist/hooks/use-pagination.mjs

@@ -20,14 +20,14 @@ const createRange = (start, end) => {
 };
 /**
 * Compute a pagination structure for result sets.
-* 
+*
 * Returns a mixed array of page numbers and the `ELLIPSIS` marker representing
 * collapsed ranges. The shape adapts to the total pages and the requested
 * sibling window around the current page.
-* 
+*
 * @param props - Pagination options. See {@link UsePaginationProps}.
 * @returns Array of page numbers and `ELLIPSIS` representing the pagination model.
-* 
+*
 * @example
 * ```tsx
 * const paginationRange = usePagination({

package/dist/lib/utils.d.mts

@@ -8,6 +8,6 @@ import { VariantProps } from "@codefast/tailwind-variants";
  * Use these `cn` / `tv` helpers everywhere in this package so class merging stays consistent
  * and optional `twMergeConfig` can be applied in one place later.
  */
-declare const cn: (...classes: ClassValue[]) => string, tv: _$_codefast_tailwind_variants0.TailwindVariantsFactory;
+declare const cn: (...classes: Array<ClassValue>) => string, tv: _$_codefast_tailwind_variants0.TailwindVariantsFactory;
 //#endregion
 export { type VariantProps, cn, tv };

package/dist/primitives/checkbox-group.d.mts

@@ -44,7 +44,7 @@ interface CheckboxGroupContextValue {
   /**
    * Array of currently selected checkbox values
    */
-  value?: string[];
+  value?: Array<string>;
 }
 /**
  * Base props for the CheckboxGroup component
@@ -53,7 +53,7 @@ interface CheckboxGroupBaseProps {
   /**
    * Default values for the checkbox group when uncontrolled
    */
-  defaultValue?: string[];
+  defaultValue?: Array<string>;
   /**
    * Direction for roving focus navigation
    */
@@ -74,7 +74,7 @@ interface CheckboxGroupBaseProps {
    * Callback fired when the selected values change
    * @param value - The new array of selected values
    */
-  onValueChange?: (value?: string[]) => void;
+  onValueChange?: (value?: Array<string>) => void;
   /**
    * Orientation of the checkbox group (horizontal or vertical)
    */

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

@@ -63,7 +63,7 @@ interface ProgressCircleProviderProps {
   /**
    * Array of threshold configurations for different value ranges
    */
-  thresholds?: Threshold[];
+  thresholds?: Array<Threshold>;
   /**
    * Current progress value (null for indeterminate state)
    */

package/dist/primitives/progress-circle.mjs

@@ -8,10 +8,10 @@ const [createProgressCircleContext, createProgressCircleScope] = createContextSc
 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
@@ -80,7 +80,7 @@ function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue,
 }
 /**
 * Root component for the progress circle
-* 
+*
 * Serves as a wrapper for other progress circle components.
 *
 * @since 0.3.16-canary.0
@@ -91,7 +91,7 @@ function ProgressCircle({ __scopeProgressCircle, ...props }) {
 const PROGRESS_CIRCLE_SVG_NAME = "ProgressCircleSVG";
 /**
 * SVG container for the progress circle
-* 
+*
 * Renders the SVG with accessibility attributes and supports indeterminate state.
 *
 * @since 0.3.16-canary.0
@@ -115,7 +115,7 @@ function ProgressCircleSVG({ __scopeProgressCircle, ...props }) {
 const PROGRESS_CIRCLE_TRACK_NAME = "ProgressCircleTrack";
 /**
 * Background circle for the progress indicator
-* 
+*
 * Renders the static track of the progress circle.
 *
 * @since 0.3.16-canary.0
@@ -135,7 +135,7 @@ function ProgressCircleTrack({ __scopeProgressCircle, ...props }) {
 const PROGRESS_CIRCLE_INDICATOR_NAME = "ProgressCircleIndicator";
 /**
 * Foreground circle showing progress
-* 
+*
 * Renders the dynamic progress indicator with stroke dash properties.
 *
 * @since 0.3.16-canary.0
@@ -159,7 +159,7 @@ function ProgressCircleIndicator({ __scopeProgressCircle, ...props }) {
 const PROGRESS_CIRCLE_VALUE_NAME = "ProgressCircleValue";
 /**
 * Displays the current progress value
-* 
+*
 * Supports custom content or default value text rendering.
 *
 * @since 0.3.16-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.3.16-canary.0",
+  "version": "0.3.16-canary.1",
   "description": "Core UI components library built with React and Tailwind CSS",
   "keywords": [
     "components",
@@ -396,33 +396,34 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^1.14.0",
     "next-themes": "^0.4.6",
-    "react-day-picker": "^9.14.0",
+    "react-day-picker": "^10.0.0",
     "react-hook-form": "^7.75.0",
     "react-resizable-panels": "^4.11.0",
     "recharts": "^3.8.1",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "@codefast/tailwind-variants": "0.3.16-canary.0"
+    "@codefast/tailwind-variants": "0.3.16-canary.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.2.4",
+    "@tailwindcss/postcss": "^4.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^25.6.0",
-    "@typescript/native-preview": "7.0.0-dev.20260504.1",
+    "@types/node": "^25.6.2",
+    "@typescript/native-preview": "7.0.0-dev.20260509.2",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.5",
     "jest-axe": "^10.0.0",
     "jsdom": "^29.1.1",
-    "postcss": "^8.5.13",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.3.0",
+    "tsdown": "^0.22.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.5",
-    "@codefast/typescript-config": "0.3.16-canary.0"
+    "@codefast/typescript-config": "0.3.16-canary.1"
   },
   "peerDependencies": {
     "@types/react": "^19.0",
@@ -438,6 +439,9 @@
       "optional": true
     }
   },
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "scripts": {
     "build": "tsdown",
     "check-types": "tsgo --noEmit",
@@ -445,6 +449,10 @@
     "dev": "tsdown --watch",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
+    "test:e2e": "vitest run tests/e2e",
+    "test:integration": "vitest run tests/integration",
+    "test:type": "vitest run tests/types",
+    "test:unit": "vitest run tests/unit",
     "test:watch": "vitest"
   }
 }