@flikk/ui 1.0.0-beta.7 → 1.0.0-beta.8

package/dist/components/forms/Checkbox/CheckboxGroup.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useState, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { checkboxTheme } from './Checkbox.theme.js';
+import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
+import { CheckboxGroupContext } from './CheckboxContext.js';
+
+const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+    const autoId = useId();
+    const groupName = name !== null && name !== void 0 ? name : `checkbox-group-${autoId}`;
+    const labelId = `${autoId}-label`;
+    const descriptionId = `${autoId}-desc`;
+    const errorId = `${autoId}-error`;
+    // Controlled vs uncontrolled
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const handleChange = (itemValue, checked) => {
+        const next = checked
+            ? [...currentValue, itemValue]
+            : currentValue.filter((v) => v !== itemValue);
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const contextValue = useMemo(() => ({
+        name: groupName,
+        value: currentValue,
+        onChange: handleChange,
+        size,
+        state,
+    }), [groupName, currentValue, size, state]);
+    const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
+    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })), description && (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
+                        checkboxTheme.groupHorizontalStyle), children: children }), error && (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: error }))] }) }));
+});
+CheckboxGroup.displayName = "Checkbox.Group";
+
+export { CheckboxGroup };

package/dist/components/forms/Checkbox/index.d.ts

@@ -1,3 +1,3 @@
 export { Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckboxSize, CheckboxState } from './Checkbox.types';
+export type { CheckboxProps, CheckboxSize, CheckboxState, CheckboxGroupProps, CheckboxGroupOrientation } from './Checkbox.types';
 export { checkboxTheme } from './Checkbox.theme';

package/dist/components/forms/Radio/Radio.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { RadioProps } from "./Radio.types";
-/**
- * Radio component for selecting one option from a group
- */
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>> & {
+    Group: React.ForwardRefExoticComponent<import("./Radio.types").RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+};

package/dist/components/forms/Radio/Radio.js

@@ -1,18 +1,34 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React__default, { useId } from 'react';
 import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
+import { useRadioGroupContext } from './RadioContext.js';
+import { RadioGroup } from './RadioGroup.js';
 
 /**
  * Radio component for selecting one option from a group
  */
-const Radio = React__default.forwardRef(({ id, name, value, checked, defaultChecked, onChange, label, description, state = "default", size = "md", className, ...restProps }, ref) => {
-    const isControlled = checked !== undefined;
+const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: checkedProp, defaultChecked, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
+    var _a, _b, _c, _d;
+    const autoId = useId();
+    const groupContext = useRadioGroupContext();
+    // Resolve props from group context or individual props
+    const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
+    const name = (_b = (_a = groupContext === null || groupContext === void 0 ? void 0 : groupContext.name) !== null && _a !== void 0 ? _a : nameProp) !== null && _b !== void 0 ? _b : autoId;
+    const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
+    const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
     const isDisabled = state === "disabled";
+    // Determine checked state
+    const isInGroup = groupContext !== undefined;
+    const checked = isInGroup ? groupContext.value === value : checkedProp;
+    const isControlled = checked !== undefined;
     const handleChange = (e) => {
         if (isDisabled)
             return;
+        if (isInGroup) {
+            groupContext.onChange(value);
+        }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
     };
     const inputProps = isControlled
@@ -20,6 +36,7 @@ const Radio = React__default.forwardRef(({ id, name, value, checked, defaultChec
         : { defaultChecked };
     return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2.5 top-0.25" : "size-3") })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })), description && (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description }))] }))] }));
 });
-Radio.displayName = "Radio";
+RadioComponent.displayName = "Radio";
+const Radio = Object.assign(RadioComponent, { Group: RadioGroup });
 
 export { Radio };

package/dist/components/forms/Radio/Radio.theme.js

@@ -34,6 +34,12 @@ const radioTheme = {
         sm: "size-5 mt-0.25",
         md: "size-6",
     },
+    // Group styles
+    groupStyle: "flex flex-col gap-1.5",
+    groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
+    groupDescriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupErrorStyle: "text-sm text-[var(--color-danger)] mt-1.5",
+    groupItemsStyle: "flex flex-col gap-3",
 };
 
 export { radioTheme };

package/dist/components/forms/Radio/Radio.types.d.ts

@@ -7,21 +7,42 @@ export type RadioState = 'default' | 'disabled';
  * Size variants for the radio component
  */
 export type RadioSize = 'sm' | 'md';
+/**
+ * Orientation for Radio.Group layout
+ */
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Radio component props
  */
 export interface RadioProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
-    id: string;
-    name: string;
-    value: string;
+    id?: string;
+    name?: string;
+    value: string | number;
     checked?: boolean;
-    onChange?: (checked: boolean, value: string) => void;
+    onChange?: (checked: boolean, value: string | number) => void;
     label?: string;
     description?: string;
     state?: RadioState;
     size?: RadioSize;
     className?: string;
 }
+/**
+ * Radio.Group component props
+ */
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number) => void;
+    name?: string;
+    size?: RadioSize;
+    state?: RadioState;
+    orientation?: RadioGroupOrientation;
+    label?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    className?: string;
+}
 /**
  * Radio theme configuration
  */
@@ -32,4 +53,9 @@ export interface RadioTheme {
     dotStyle: string;
     descriptionStyle: string;
     sizes: Record<RadioSize, string>;
+    groupStyle?: string;
+    groupHorizontalStyle?: string;
+    groupDescriptionStyle?: string;
+    groupErrorStyle?: string;
+    groupItemsStyle?: string;
 }

package/dist/components/forms/Radio/RadioContext.d.ts

@@ -0,0 +1,14 @@
+import type { RadioSize, RadioState } from "./Radio.types";
+export interface RadioGroupContextValue {
+    name: string;
+    value: string | number | undefined;
+    onChange: (value: string | number) => void;
+    size: RadioSize;
+    state: RadioState;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;
+/**
+ * Returns the group context, or undefined when used outside a Radio.Group.
+ * This allows standalone Radio usage without a Group wrapper.
+ */
+export declare function useRadioGroupContext(): RadioGroupContextValue | undefined;

package/dist/components/forms/Radio/RadioContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const RadioGroupContext = createContext(undefined);
+/**
+ * Returns the group context, or undefined when used outside a Radio.Group.
+ * This allows standalone Radio usage without a Group wrapper.
+ */
+function useRadioGroupContext() {
+    return useContext(RadioGroupContext);
+}
+
+export { RadioGroupContext, useRadioGroupContext };

package/dist/components/forms/Radio/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { RadioGroupProps } from "./Radio.types";
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/components/forms/Radio/RadioGroup.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useState, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { radioTheme } from './Radio.theme.js';
+import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
+import { RadioGroupContext } from './RadioContext.js';
+
+const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+    const autoId = useId();
+    const groupName = name !== null && name !== void 0 ? name : `radio-group-${autoId}`;
+    const labelId = `${autoId}-label`;
+    const descriptionId = `${autoId}-desc`;
+    const errorId = `${autoId}-error`;
+    // Controlled vs uncontrolled
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const handleChange = (itemValue) => {
+        if (!isControlled) {
+            setInternalValue(itemValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(itemValue);
+    };
+    const contextValue = useMemo(() => ({
+        name: groupName,
+        value: currentValue,
+        onChange: handleChange,
+        size,
+        state,
+    }), [groupName, currentValue, size, state]);
+    const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
+    return (jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "radiogroup", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", radioTheme.groupStyle, className), ...props, children: [label && (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })), description && (jsx("p", { id: descriptionId, className: radioTheme.groupDescriptionStyle, children: description })), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), error && (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: error }))] }) }));
+});
+RadioGroup.displayName = "Radio.Group";
+
+export { RadioGroup };

package/dist/components/forms/Radio/index.d.ts

@@ -1,3 +1,3 @@
 export { Radio } from './Radio';
-export type { RadioProps, RadioSize, RadioState } from './Radio.types';
+export type { RadioProps, RadioSize, RadioState, RadioGroupProps, RadioGroupOrientation } from './Radio.types';
 export { radioTheme } from './Radio.theme';

package/dist/components/forms/index.d.ts

@@ -11,10 +11,10 @@ export { FormLabel } from "./FormLabel";
 export type { FormLabelProps, FormLabelState, FormLabelTheme, } from "./FormLabel";
 export { formLabelTheme } from "./FormLabel";
 export { Radio } from "./Radio";
-export type { RadioProps, RadioSize, RadioState } from "./Radio";
+export type { RadioProps, RadioSize, RadioState, RadioGroupProps, RadioGroupOrientation, } from "./Radio";
 export { radioTheme } from "./Radio";
 export { Checkbox } from "./Checkbox";
-export type { CheckboxProps, CheckboxSize, CheckboxState } from "./Checkbox";
+export type { CheckboxProps, CheckboxSize, CheckboxState, CheckboxGroupProps, CheckboxGroupOrientation, } from "./Checkbox";
 export { checkboxTheme } from "./Checkbox";
 export { Switch } from "./Switch";
 export type { SwitchProps, SwitchThemeOverrides } from "./Switch";

package/dist/hooks/useSelectPortal.d.ts

@@ -6,6 +6,7 @@ export interface UseSimpleDropdownOptions {
     offset?: number;
     estimatedWidth?: number;
     autoWidth?: boolean;
+    onClose?: () => void;
 }
 export interface SimpleDropdownReturn {
     position: {
@@ -24,5 +25,5 @@ export interface SimpleDropdownReturn {
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
-export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;

package/dist/hooks/useSelectPortal.js

@@ -1,19 +1,11 @@
-import { useRef, useState, useCallback, useLayoutEffect, useMemo } from 'react';
+import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 
-// Simple debounce utility
-const debounce = (func, wait) => {
-    let timeout;
-    return () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(func, wait);
-    };
-};
 /**
  * Fixed dropdown positioning hook
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, }) => {
+const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, }) => {
     const contentRef = useRef(null);
     const [position, setPosition] = useState({ top: -9999, left: -9999, width: 0 });
     const [cssVariables, setCssVariables] = useState({});
@@ -280,20 +272,53 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
             return;
         calculatePosition();
     }, [isOpen, calculatePosition]);
-    // Debounced position updates for better performance
-    const debouncedCalculatePosition = useMemo(() => debounce(calculatePosition, 16), // ~60fps
-    [calculatePosition]);
-    // Update position on scroll and resize - debounced for performance
+    // rAF-synced scroll handler: skips internal scrolls, detects off-screen trigger
+    const scrollRafRef = useRef(null);
+    const handleScroll = useCallback((e) => {
+        // Skip if scroll originated inside the popover content
+        if (contentRef.current && contentRef.current.contains(e.target)) {
+            return;
+        }
+        // Close if trigger has scrolled off-screen
+        if (triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            const isOffScreen = rect.bottom < 0 || rect.top > window.innerHeight
+                || rect.right < 0 || rect.left > window.innerWidth;
+            if (isOffScreen && onClose) {
+                onClose();
+                return;
+            }
+        }
+        if (scrollRafRef.current)
+            cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = requestAnimationFrame(() => {
+            scrollRafRef.current = null;
+            calculatePosition();
+        });
+    }, [calculatePosition, onClose, triggerRef]);
+    const handleResize = useCallback(() => {
+        if (scrollRafRef.current)
+            cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = requestAnimationFrame(() => {
+            scrollRafRef.current = null;
+            calculatePosition();
+        });
+    }, [calculatePosition]);
+    // Update position on scroll and resize - rAF-synced for smooth tracking
     useLayoutEffect(() => {
         if (!isOpen)
             return;
-        window.addEventListener("scroll", debouncedCalculatePosition, { passive: true, capture: true });
-        window.addEventListener("resize", debouncedCalculatePosition, { passive: true });
+        window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+        window.addEventListener("resize", handleResize, { passive: true });
         return () => {
-            window.removeEventListener("scroll", debouncedCalculatePosition, true);
-            window.removeEventListener("resize", debouncedCalculatePosition);
+            window.removeEventListener("scroll", handleScroll, true);
+            window.removeEventListener("resize", handleResize);
+            if (scrollRafRef.current) {
+                cancelAnimationFrame(scrollRafRef.current);
+                scrollRafRef.current = null;
+            }
         };
-    }, [isOpen, debouncedCalculatePosition]);
+    }, [isOpen, handleScroll, handleResize]);
     // Recalculate when dropdown content resizes (e.g. search filtering)
     useLayoutEffect(() => {
         if (!isOpen)