@codefast/ui 0.3.13-canary.3 → 0.3.13

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

@@ -0,0 +1,144 @@
+import { ComponentProps, JSX } from "react";
+import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
+import { Scope } from "@radix-ui/react-context";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
+
+//#region src/primitives/checkbox-group.d.ts
+/**
+ * Type for components that can be scoped within the CheckboxGroup context
+ */
+type ScopedProps<P> = P & {
+  /**
+   * Optional scope for the CheckboxGroup component
+   */
+  __scopeCheckboxGroup?: Scope;
+};
+declare const createCheckboxGroupScope: _$_radix_ui_react_context0.CreateScope;
+/**
+ * Context values shared between CheckboxGroup components
+ */
+interface CheckboxGroupContextValue {
+  /**
+   * Whether all checkbox items are disabled
+   */
+  disabled: boolean;
+  /**
+   * Function called when a checkbox item is checked
+   * @param value - The value of the checked item
+   */
+  onItemCheck: (value: string) => void;
+  /**
+   * Function called when a checkbox item is unchecked
+   * @param value - The value of the unchecked item
+   */
+  onItemUncheck: (value: string) => void;
+  /**
+   * Whether checkbox selection is required
+   */
+  required: boolean;
+  /**
+   * Optional name attribute for the checkbox group form field
+   */
+  name?: string;
+  /**
+   * Array of currently selected checkbox values
+   */
+  value?: string[];
+}
+/**
+ * Base props for the CheckboxGroup component
+ */
+interface CheckboxGroupBaseProps {
+  /**
+   * Default values for the checkbox group when uncontrolled
+   */
+  defaultValue?: string[];
+  /**
+   * Direction for roving focus navigation
+   */
+  dir?: RovingFocusGroup.RovingFocusGroupProps["dir"];
+  /**
+   * Whether the entire checkbox group is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether focus should loop to the start/end when reaching the boundaries
+   */
+  loop?: RovingFocusGroup.RovingFocusGroupProps["loop"];
+  /**
+   * Name attribute for the checkbox group form field
+   */
+  name?: CheckboxGroupContextValue["name"];
+  /**
+   * Callback fired when the selected values change
+   * @param value - The new array of selected values
+   */
+  onValueChange?: (value?: string[]) => void;
+  /**
+   * Orientation of the checkbox group (horizontal or vertical)
+   */
+  orientation?: RovingFocusGroup.RovingFocusGroupProps["orientation"];
+  /**
+   * Whether at least one checkbox must be selected
+   */
+  required?: boolean;
+  /**
+   * Controlled values for the checkbox group
+   */
+  value?: CheckboxGroupContextValue["value"];
+}
+/**
+ * Props for the CheckboxGroup component
+ */
+type CheckboxGroupProps = CheckboxGroupBaseProps & ComponentProps<"div">;
+/**
+ * CheckboxGroup component that manages a group of checkboxes with roving focus
+ */
+declare function CheckboxGroup({
+  __scopeCheckboxGroup,
+  defaultValue,
+  dir,
+  disabled,
+  loop,
+  name,
+  onValueChange,
+  orientation,
+  required,
+  value: valueProperty,
+  ...props
+}: ScopedProps<CheckboxGroupProps>): JSX.Element;
+/**
+ * Props for the CheckboxGroupItem component
+ */
+interface CheckboxGroupItemProps extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "checked" | "defaultChecked" | "name" | "onCheckedChange"> {
+  /**
+   * Value of the checkbox item, used to identify the item within the group
+   */
+  value: string;
+  /**
+   * Whether this specific checkbox item is disabled
+   */
+  disabled?: boolean;
+}
+/**
+ * Individual checkbox item within a CheckboxGroup
+ */
+declare function CheckboxGroupItem({
+  __scopeCheckboxGroup,
+  disabled,
+  ...props
+}: ScopedProps<CheckboxGroupItemProps>): JSX.Element;
+/**
+ * Props for the CheckboxGroupIndicator component
+ */
+type CheckboxGroupIndicatorProps = ComponentProps<typeof CheckboxPrimitive.Indicator>;
+/**
+ * Visual indicator component for a CheckboxGroupItem
+ */
+declare function CheckboxGroupIndicator({
+  __scopeCheckboxGroup,
+  ...props
+}: ScopedProps<CheckboxGroupIndicatorProps>): JSX.Element;
+//#endregion
+export { CheckboxGroup, CheckboxGroup as Root, CheckboxGroupIndicator, CheckboxGroupIndicator as Indicator, type CheckboxGroupIndicatorProps, CheckboxGroupItem, CheckboxGroupItem as Item, type CheckboxGroupItemProps, type CheckboxGroupProps, createCheckboxGroupScope };

package/dist/primitives/checkbox-group.mjs

@@ -0,0 +1,126 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { createContextScope } from "@radix-ui/react-context";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { createCheckboxScope } from "@radix-ui/react-checkbox";
+import { useDirection } from "@radix-ui/react-direction";
+import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
+import { createRovingFocusGroupScope } from "@radix-ui/react-roving-focus";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/primitives/checkbox-group.tsx
+const CHECKBOX_GROUP_NAME = "CheckboxGroup";
+const [createCheckboxGroupContext, createCheckboxGroupScope] = createContextScope(CHECKBOX_GROUP_NAME, [createRovingFocusGroupScope, createCheckboxScope]);
+const useRovingFocusGroupScope = createRovingFocusGroupScope();
+const useCheckboxScope = createCheckboxScope();
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createCheckboxGroupContext(CHECKBOX_GROUP_NAME);
+/**
+* CheckboxGroup component that manages a group of checkboxes with roving focus
+*/
+function CheckboxGroup({ __scopeCheckboxGroup, defaultValue, dir, disabled = false, loop = true, name, onValueChange, orientation, required = false, value: valueProperty, ...props }) {
+	/**
+	* Scope for the RovingFocusGroup component
+	*/
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+	/**
+	* Direction for layout and navigation
+	*/
+	const direction = useDirection(dir);
+	/**
+	* State for managing selected checkbox values
+	*/
+	const [value = [], setValue] = useControllableState({
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProperty
+	});
+	return /* @__PURE__ */ jsx(CheckboxGroupContextProvider, {
+		disabled,
+		name,
+		required,
+		scope: __scopeCheckboxGroup,
+		value,
+		onItemCheck: useCallback((itemValue) => {
+			setValue((previousValue) => [...previousValue ?? [], itemValue]);
+		}, [setValue]),
+		onItemUncheck: useCallback((itemValue) => {
+			setValue((previousValue) => {
+				const currentValue = previousValue ?? [];
+				if (required && currentValue.length === 1 && currentValue[0] === itemValue) return currentValue;
+				return currentValue.filter((inputValue) => inputValue !== itemValue);
+			});
+		}, [setValue, required]),
+		children: /* @__PURE__ */ jsx(RovingFocusGroup.Root, {
+			asChild: true,
+			...rovingFocusGroupScope,
+			dir: direction,
+			loop,
+			orientation,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-disabled": disabled ? "" : void 0,
+				dir: direction,
+				role: "group",
+				...props
+			})
+		})
+	});
+}
+const ITEM_NAME = "CheckboxGroupItem";
+/**
+* Individual checkbox item within a CheckboxGroup
+*/
+function CheckboxGroupItem({ __scopeCheckboxGroup, disabled, ...props }) {
+	/**
+	* Context values from the parent CheckboxGroup
+	*/
+	const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
+	/**
+	* Combined disabled state from both context and props
+	*/
+	const isDisabled = context.disabled || disabled;
+	/**
+	* Scope for the RovingFocusGroup component
+	*/
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+	/**
+	* Scope for the Checkbox component
+	*/
+	const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+	/**
+	* Whether this checkbox is currently checked
+	*/
+	const checked = context.value?.includes(props.value);
+	return /* @__PURE__ */ jsx(RovingFocusGroup.Item, {
+		asChild: true,
+		...rovingFocusGroupScope,
+		active: checked,
+		focusable: !isDisabled,
+		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+			"aria-label": props.value,
+			checked,
+			disabled: isDisabled,
+			name: context.name,
+			required: context.required,
+			...checkboxScope,
+			...props,
+			onCheckedChange: (checkedState) => {
+				if (checkedState) context.onItemCheck(props.value);
+				else context.onItemUncheck(props.value);
+			}
+		})
+	});
+}
+/**
+* Visual indicator component for a CheckboxGroupItem
+*/
+function CheckboxGroupIndicator({ __scopeCheckboxGroup, ...props }) {
+	/**
+	* Scope for the Checkbox component
+	*/
+	const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+	return /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+		...checkboxScope,
+		...props
+	});
+}
+//#endregion
+export { CheckboxGroup, CheckboxGroup as Root, CheckboxGroupIndicator, CheckboxGroupIndicator as Indicator, CheckboxGroupItem, CheckboxGroupItem as Item, createCheckboxGroupScope };

package/dist/primitives/input-number.d.mts

@@ -0,0 +1,73 @@
+import { Field as InputField, Input } from "./input.mjs";
+import { ComponentProps, JSX } from "react";
+import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
+import { Scope } from "@radix-ui/react-context";
+
+//#region src/primitives/input-number.d.ts
+/**
+ * Props that include an optional scope for the InputNumber component.
+ */
+type ScopedProps<P> = P & {
+  /** Optional scope for the InputNumber component context */__scopeInputNumber?: Scope;
+};
+declare const createInputNumberScope: _$_radix_ui_react_context0.CreateScope;
+/**
+ * Props for the main InputNumber component.
+ */
+interface InputNumberProps extends ComponentProps<typeof Input> {
+  /** Accessible label for the decrement button */
+  ariaDecrementLabel?: string;
+  /** Accessible label for the increment button */
+  ariaIncrementLabel?: string;
+  /** Initial value when uncontrolled */
+  defaultValue?: number;
+  /** Options for number formatting */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Unique identifier for the input */
+  id?: string;
+  /** Locale used for number formatting */
+  locale?: string;
+  /** Maximum allowed value */
+  max?: number;
+  /** Minimum allowed value */
+  min?: number;
+  /** Handler called when the value changes */
+  onChange?: (value?: number) => void;
+  /** Step value for increments/decrements */
+  step?: number;
+  /** Current value when controlled */
+  value?: number;
+}
+declare function InputNumber(numberInputProps: ScopedProps<InputNumberProps>): JSX.Element;
+/**
+ * Defines the props for the `InputNumberField` component.
+ */
+type InputNumberFieldProps = Omit<ComponentProps<typeof InputField>, "defaultValue" | "disabled" | "id" | "max" | "min" | "onChange" | "prefix" | "readOnly" | "step" | "value">;
+declare function InputNumberField({
+  __scopeInputNumber,
+  onBlur,
+  onKeyDown,
+  ...props
+}: ScopedProps<InputNumberFieldProps>): JSX.Element;
+/**
+ * Props for the NumberStepperButton component.
+ */
+interface NumberStepperButtonProps extends ComponentProps<"button"> {
+  /**
+   * The operation to perform when the button is pressed.
+   * - `'increment'`: Increases the value.
+   * - `'decrement'`: Decreases the value.
+   */
+  operation: "decrement" | "increment";
+}
+declare function NumberStepperButton({
+  __scopeInputNumber,
+  operation,
+  ...props
+}: ScopedProps<NumberStepperButtonProps>): JSX.Element;
+type InputNumberIncrementButtonProps = Omit<ComponentProps<typeof NumberStepperButton>, "operation">;
+declare function InputNumberIncrementButton(props: InputNumberIncrementButtonProps): JSX.Element;
+type InputNumberDecrementButtonProps = Omit<ComponentProps<typeof NumberStepperButton>, "operation">;
+declare function InputNumberDecrementButton(props: InputNumberDecrementButtonProps): JSX.Element;
+//#endregion
+export { InputNumberDecrementButton as DecrementButton, InputNumberDecrementButton, InputNumberField as Field, InputNumberField, InputNumberIncrementButton as IncrementButton, InputNumberIncrementButton, InputNumber, InputNumber as Root, type InputNumberDecrementButtonProps, type InputNumberFieldProps, type InputNumberIncrementButtonProps, type InputNumberProps, createInputNumberScope };