@codefast/ui 0.3.10 → 0.3.11-canary.1

package/dist/primitives/input-number.js

@@ -4,7 +4,7 @@ import { createContextScope } from "@radix-ui/react-context";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Field, Root, createInputScope } from "./input.js";
-const NUMBER_INPUT_NAME = 'InputNumber';
+const NUMBER_INPUT_NAME = "InputNumber";
 const [createInputNumberContext, createInputNumberScope] = createContextScope(NUMBER_INPUT_NAME, [
     createInputScope
 ]);
@@ -13,7 +13,7 @@ const [InputNumberContextProvider, useInputNumberContext] = createInputNumberCon
 function InputNumber(numberInputProps) {
     const { __scopeInputNumber, ariaDecrementLabel, ariaIncrementLabel, defaultValue, formatOptions = {
         minimumFractionDigits: 0,
-        style: 'decimal'
+        style: "decimal"
     }, id, locale, max, min, onChange, step = 1, value: valueProperty, ...props } = numberInputProps;
     const inputScope = useInputScope(__scopeInputNumber);
     const inputRef = useRef(null);
@@ -26,20 +26,20 @@ function InputNumber(numberInputProps) {
         locale
     ]);
     const formatValue = useCallback((inputValue)=>{
-        if (void 0 === inputValue || Number.isNaN(inputValue)) return '';
+        if (void 0 === inputValue || Number.isNaN(inputValue)) return "";
         return new Intl.NumberFormat(locale, formatOptions).format(inputValue);
     }, [
         formatOptions,
         locale
     ]);
     const parseValue = useCallback((inputValue)=>{
-        if ('number' == typeof inputValue) return clamp(inputValue, min, max);
-        if ('string' != typeof inputValue) return NaN;
-        const cleanedValue = inputValue.trim().replaceAll(/[^\d.,\-()]/g, '');
-        if ('' === cleanedValue) return NaN;
+        if ("number" == typeof inputValue) return clamp(inputValue, min, max);
+        if ("string" != typeof inputValue) return NaN;
+        const cleanedValue = inputValue.trim().replaceAll(/[^\d.,\-()]/g, "");
+        if ("" === cleanedValue) return NaN;
         const normalizedValue = normalizeInputValue(cleanedValue, thousandSeparator, decimalSeparator);
         let parsedValue = Number.parseFloat(normalizedValue);
-        if ('percent' === formatOptions.style) parsedValue /= 100;
+        if ("percent" === formatOptions.style) parsedValue /= 100;
         return Number.isNaN(parsedValue) ? 0 : clamp(parsedValue, min, max);
     }, [
         decimalSeparator,
@@ -116,7 +116,7 @@ function InputNumber(numberInputProps) {
         })
     });
 }
-const NUMBER_INPUT_FIELD_NAME = 'InputNumberField';
+const NUMBER_INPUT_FIELD_NAME = "InputNumberField";
 function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
     const inputScope = useInputScope(__scopeInputNumber);
     const { defaultValue, disabled, formatValue, id, inputRef, max, min, onChange, onDecrement, onDecrementToMin, onIncrement, onIncrementToMax, parseValue, readOnly, step, value } = useInputNumberContext(NUMBER_INPUT_FIELD_NAME, __scopeInputNumber);
@@ -132,19 +132,19 @@ function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
     ]);
     const handleKeyDown = useCallback((event)=>{
         switch(event.key){
-            case 'ArrowUp':
+            case "ArrowUp":
                 onIncrement();
                 event.preventDefault();
                 break;
-            case 'PageUp':
+            case "PageUp":
                 onIncrementToMax();
                 event.preventDefault();
                 break;
-            case 'ArrowDown':
+            case "ArrowDown":
                 onDecrement();
                 event.preventDefault();
                 break;
-            case 'PageDown':
+            case "PageDown":
                 onDecrementToMin();
                 event.preventDefault();
                 break;
@@ -159,23 +159,23 @@ function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
     ]);
     const handleKeyDownPrevent = useCallback((event)=>{
         switch(event.key){
-            case 'ArrowUp':
-            case 'ArrowDown':
-            case 'ArrowLeft':
-            case 'ArrowRight':
-            case 'PageUp':
-            case 'PageDown':
-            case 'Tab':
-            case 'Escape':
-            case 'Enter':
-            case 'Backspace':
-            case 'Delete':
-            case 'Home':
-            case 'End':
-            case '.':
-            case ',':
-            case '-':
-            case '%':
+            case "ArrowUp":
+            case "ArrowDown":
+            case "ArrowLeft":
+            case "ArrowRight":
+            case "PageUp":
+            case "PageDown":
+            case "Tab":
+            case "Escape":
+            case "Enter":
+            case "Backspace":
+            case "Delete":
+            case "Home":
+            case "End":
+            case ".":
+            case ",":
+            case "-":
+            case "%":
                 return;
             default:
                 if (isNumberKey(event.key) || isModifierKey(event) || isFunctionKey(event.key)) return;
@@ -184,7 +184,7 @@ function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
     }, []);
     const handleKeyDownEnter = useCallback((event)=>{
         const inputElement = inputRef.current;
-        if ('Enter' !== event.key || !inputElement) return;
+        if ("Enter" !== event.key || !inputElement) return;
         const numericValue = parseValue(inputElement.value);
         const formattedValue = formatValue(numericValue);
         if (formattedValue !== inputElement.value) inputElement.value = formattedValue;
@@ -212,9 +212,9 @@ function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
             else onDecrement();
         };
         const inputElement = inputRef.current;
-        inputElement?.addEventListener('wheel', handleWheel);
+        inputElement?.addEventListener("wheel", handleWheel);
         return ()=>{
-            inputElement?.removeEventListener('wheel', handleWheel);
+            inputElement?.removeEventListener("wheel", handleWheel);
         };
     }, [
         onIncrement,
@@ -238,9 +238,9 @@ function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
             onChange(parseValue(defaultValue));
         };
         const form = inputElement.form;
-        form?.addEventListener('reset', handleReset);
+        form?.addEventListener("reset", handleReset);
         return ()=>{
-            form?.removeEventListener('reset', handleReset);
+            form?.removeEventListener("reset", handleReset);
         };
     }, [
         defaultValue,
@@ -264,7 +264,7 @@ function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
         ...props
     });
 }
-const NUMBER_STEPPER_BUTTON_NAME = 'NumberStepperButton';
+const NUMBER_STEPPER_BUTTON_NAME = "NumberStepperButton";
 function NumberStepperButton({ __scopeInputNumber, operation, ...props }) {
     const { ariaDecrementLabel, ariaIncrementLabel, disabled, id, max, min, onDecrement, onIncrement, value } = useInputNumberContext(NUMBER_STEPPER_BUTTON_NAME, __scopeInputNumber);
     const isDisabled = useMemo(()=>{
@@ -294,7 +294,7 @@ function NumberStepperButton({ __scopeInputNumber, operation, ...props }) {
         }
     }, []);
     const handlePointerDown = useCallback(()=>{
-        const action = 'increment' === operation ? onIncrement : onDecrement;
+        const action = "increment" === operation ? onIncrement : onDecrement;
         startActionInterval(action);
     }, [
         onDecrement,
@@ -306,9 +306,9 @@ function NumberStepperButton({ __scopeInputNumber, operation, ...props }) {
         event.preventDefault();
     }, []);
     const handleKeyDown = useCallback((event)=>{
-        if ('Enter' === event.key || ' ' === event.key) {
+        if ("Enter" === event.key || " " === event.key) {
             event.preventDefault();
-            const action = 'increment' === operation ? onIncrement : onDecrement;
+            const action = "increment" === operation ? onIncrement : onDecrement;
             action();
         }
     }, [
@@ -318,7 +318,7 @@ function NumberStepperButton({ __scopeInputNumber, operation, ...props }) {
     ]);
     return /*#__PURE__*/ jsx("button", {
         "aria-controls": id,
-        "aria-label": 'increment' === operation ? ariaIncrementLabel : ariaDecrementLabel,
+        "aria-label": "increment" === operation ? ariaIncrementLabel : ariaDecrementLabel,
         "aria-live": "polite",
         disabled: isDisabled,
         type: "button",
@@ -351,11 +351,11 @@ function chain(...callbacks) {
 function getNumberFormatSeparators(locale) {
     const numberFormat = new Intl.NumberFormat(locale);
     const parts = numberFormat.formatToParts(12345.6);
-    let thousandSeparator = '';
-    let decimalSeparator = '';
+    let thousandSeparator = "";
+    let decimalSeparator = "";
     for (const part of parts){
-        if ('group' === part.type) thousandSeparator = part.value;
-        if ('decimal' === part.type) decimalSeparator = part.value;
+        if ("group" === part.type) thousandSeparator = part.value;
+        if ("decimal" === part.type) decimalSeparator = part.value;
         if (thousandSeparator && decimalSeparator) break;
     }
     return {
@@ -364,13 +364,13 @@ function getNumberFormatSeparators(locale) {
     };
 }
 function normalizeInputValue(value, thousandSeparator, decimalSeparator) {
-    return value.replaceAll(new RegExp(`\\${thousandSeparator}`, 'g'), '').replace(new RegExp(`\\${decimalSeparator}`), '.').replaceAll(/[()]/g, '-');
+    return value.replaceAll(new RegExp(`\\${thousandSeparator}`, "g"), "").replace(new RegExp(`\\${decimalSeparator}`), ".").replaceAll(/[()]/g, "-");
 }
 function isModifierKey(event) {
     return event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
 }
 function isFunctionKey(key) {
-    return key.startsWith('F') && key.length > 1;
+    return key.startsWith("F") && key.length > 1;
 }
 function isNumberKey(key) {
     return !Number.isNaN(Number(key));

package/dist/primitives/input.d.ts

@@ -1,5 +1,5 @@
-import type { Scope } from '@radix-ui/react-context';
-import type { ComponentProps, JSX, PropsWithChildren, ReactNode } from 'react';
+import type { Scope } from "@radix-ui/react-context";
+import type { ComponentProps, JSX, PropsWithChildren, ReactNode } from "react";
 /**
  * Type for adding scope to component props
  */
@@ -42,7 +42,7 @@ interface InputBehaviorProps {
     /**
      * Position of the loading spinner - either before or after the input
      */
-    loaderPosition?: 'prefix' | 'suffix';
+    loaderPosition?: "prefix" | "suffix";
     /**
      * Whether the input is in the loading state
      */
@@ -60,7 +60,7 @@ declare function Input(inputProps: ScopedProps<InputProps>): JSX.Element;
 /**
  * Props for the InputField component
  */
-type InputFieldProps = ComponentProps<'input'>;
+type InputFieldProps = ComponentProps<"input">;
 declare function InputField({ __scopeInput, ...props }: ScopedProps<InputFieldProps>): JSX.Element;
 export { createInputScope, InputField as Field, Input, InputField, Input as Root };
 export type { InputFieldProps, InputProps };

package/dist/primitives/input.js

@@ -2,20 +2,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createContextScope } from "@radix-ui/react-context";
 import { useRef } from "react";
-const INPUT_NAME = 'Input';
+const INPUT_NAME = "Input";
 const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
 const [InputContextProvider, useInputContext] = createInputContext(INPUT_NAME);
 function Input(inputProps) {
-    const { __scopeInput, children, disabled, loaderPosition = 'prefix', loading, prefix, readOnly, spinner, suffix, ...props } = inputProps;
+    const { __scopeInput, children, disabled, loaderPosition = "prefix", loading, prefix, readOnly, spinner, suffix, ...props } = inputProps;
     const inputRef = useRef(null);
     const handlePointerDown = (event)=>{
         const target = event.target;
-        if ('input' === target.tagName.toLowerCase() || target.closest('input, a, button')) return void event.stopPropagation();
+        if ("input" === target.tagName.toLowerCase() || target.closest("input, a, button")) return void event.stopPropagation();
         const inputElement = inputRef.current;
         if (!inputElement) return;
         if (document.activeElement === inputElement) return void event.preventDefault();
         requestAnimationFrame(()=>{
-            if ('file' === inputElement.type) return void inputElement.click();
+            if ("file" === inputElement.type) return void inputElement.click();
             if (document.activeElement !== inputElement) inputElement.focus();
         });
     };
@@ -31,14 +31,14 @@ function Input(inputProps) {
             onPointerDown: handlePointerDown,
             ...props,
             children: [
-                loading && 'prefix' === loaderPosition ? spinner : prefix,
+                loading && "prefix" === loaderPosition ? spinner : prefix,
                 children,
-                loading && 'suffix' === loaderPosition ? spinner : suffix
+                loading && "suffix" === loaderPosition ? spinner : suffix
             ]
         })
     });
 }
-const INPUT_FIELD_NAME = 'InputField';
+const INPUT_FIELD_NAME = "InputField";
 function InputField({ __scopeInput, ...props }) {
     const { disabled, inputRef, readOnly } = useInputContext(INPUT_FIELD_NAME, __scopeInput);
     const composedInputRef = useComposedRefs(inputRef);

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

@@ -1,5 +1,5 @@
-import type { Scope } from '@radix-ui/react-context';
-import type { ComponentProps, ReactNode } from 'react';
+import type { Scope } from "@radix-ui/react-context";
+import type { ComponentProps, ReactNode } from "react";
 type ScopedProps<P> = P & {
     __scopeProgressCircle?: Scope;
 };
@@ -71,35 +71,35 @@ interface ProgressCircleProviderProps {
  * ```
  */
 declare function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max, min, size, startAngle, strokeWidth, thresholds, value, }: ScopedProps<ProgressCircleProviderProps>): ReactNode;
-type ProgressCircleProps = ComponentProps<'div'>;
+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'>;
+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'>;
+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'>;
+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'> {
+interface ProgressCircleValueProps extends Omit<ComponentProps<"div">, "children"> {
     children?: ((context: {
         value: number | undefined;
         valueText: string;

package/dist/primitives/progress-circle.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createContextScope } from "@radix-ui/react-context";
 import { useId, useMemo } from "react";
-const PROGRESS_CIRCLE_PROVIDER_NAME = 'ProgressCircleProvider';
+const PROGRESS_CIRCLE_PROVIDER_NAME = "ProgressCircleProvider";
 const [createProgressCircleContext, createProgressCircleScope] = createContextScope(PROGRESS_CIRCLE_PROVIDER_NAME);
 const [ProgressCircleContextProvider, useProgressCircleContext] = createProgressCircleContext(PROGRESS_CIRCLE_PROVIDER_NAME);
 function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max = 100, min = 0, size = 48, startAngle = -90, strokeWidth = 4, thresholds, value }) {
@@ -64,7 +64,7 @@ function ProgressCircle({ __scopeProgressCircle, ...props }) {
         ...props
     });
 }
-const PROGRESS_CIRCLE_SVG_NAME = 'ProgressCircleSVG';
+const PROGRESS_CIRCLE_SVG_NAME = "ProgressCircleSVG";
 function ProgressCircleSVG({ __scopeProgressCircle, ...props }) {
     const { clampedValue, id, max, min, size, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_SVG_NAME, __scopeProgressCircle);
     return /*#__PURE__*/ jsx("svg", {
@@ -81,7 +81,7 @@ function ProgressCircleSVG({ __scopeProgressCircle, ...props }) {
         ...props
     });
 }
-const PROGRESS_CIRCLE_TRACK_NAME = 'ProgressCircleTrack';
+const PROGRESS_CIRCLE_TRACK_NAME = "ProgressCircleTrack";
 function ProgressCircleTrack({ __scopeProgressCircle, ...props }) {
     const { center, radius, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_TRACK_NAME, __scopeProgressCircle);
     return /*#__PURE__*/ jsx("circle", {
@@ -89,12 +89,12 @@ function ProgressCircleTrack({ __scopeProgressCircle, ...props }) {
         cy: center,
         fill: "transparent",
         r: radius,
-        stroke: threshold?.background ?? 'currentColor',
+        stroke: threshold?.background ?? "currentColor",
         strokeWidth: strokeWidth,
         ...props
     });
 }
-const PROGRESS_CIRCLE_INDICATOR_NAME = 'ProgressCircleIndicator';
+const PROGRESS_CIRCLE_INDICATOR_NAME = "ProgressCircleIndicator";
 function ProgressCircleIndicator({ __scopeProgressCircle, ...props }) {
     const { center, circumference, radius, rotationTransform, strokeDashoffset, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
     return /*#__PURE__*/ jsx("circle", {
@@ -102,7 +102,7 @@ function ProgressCircleIndicator({ __scopeProgressCircle, ...props }) {
         cy: center,
         fill: "transparent",
         r: radius,
-        stroke: threshold?.color ?? 'currentColor',
+        stroke: threshold?.color ?? "currentColor",
         strokeDasharray: circumference,
         strokeDashoffset: strokeDashoffset,
         strokeLinecap: "round",
@@ -111,10 +111,10 @@ function ProgressCircleIndicator({ __scopeProgressCircle, ...props }) {
         ...props
     });
 }
-const PROGRESS_CIRCLE_VALUE_NAME = 'ProgressCircleValue';
+const PROGRESS_CIRCLE_VALUE_NAME = "ProgressCircleValue";
 function ProgressCircleValue({ __scopeProgressCircle, children, ...props }) {
     const { clampedValue, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_VALUE_NAME, __scopeProgressCircle);
-    if ('function' == typeof children) return children({
+    if ("function" == typeof children) return children({
         value: clampedValue,
         valueText
     });