@codefast/ui 0.3.9 → 0.3.10

package/dist/primitives/checkbox-group.cjs

@@ -1 +1,151 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,c)=>{for(var o in c)__webpack_require__.o(c,o)&&!__webpack_require__.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:c[o]})},__webpack_require__.o=(e,c)=>Object.prototype.hasOwnProperty.call(e,c),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{createCheckboxGroupScope:()=>createCheckboxGroupScope,CheckboxGroup:()=>CheckboxGroup,CheckboxGroupItem:()=>CheckboxGroupItem,CheckboxGroupIndicator:()=>CheckboxGroupIndicator,Indicator:()=>CheckboxGroupIndicator,Item:()=>CheckboxGroupItem,Root:()=>CheckboxGroup});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_react_namespaceObject=require("react"),react_checkbox_namespaceObject=require("@radix-ui/react-checkbox"),react_context_namespaceObject=require("@radix-ui/react-context"),react_direction_namespaceObject=require("@radix-ui/react-direction"),react_roving_focus_namespaceObject=require("@radix-ui/react-roving-focus"),react_use_controllable_state_namespaceObject=require("@radix-ui/react-use-controllable-state"),CHECKBOX_GROUP_NAME="CheckboxGroup",[createCheckboxGroupContext,createCheckboxGroupScope]=(0,react_context_namespaceObject.createContextScope)(CHECKBOX_GROUP_NAME,[react_roving_focus_namespaceObject.createRovingFocusGroupScope,react_checkbox_namespaceObject.createCheckboxScope]),useRovingFocusGroupScope=(0,react_roving_focus_namespaceObject.createRovingFocusGroupScope)(),useCheckboxScope=(0,react_checkbox_namespaceObject.createCheckboxScope)(),[CheckboxGroupContextProvider,useCheckboxGroupContext]=createCheckboxGroupContext(CHECKBOX_GROUP_NAME);function CheckboxGroup({__scopeCheckboxGroup:e,defaultValue:c,dir:o,disabled:r=!1,loop:t=!0,name:_,onValueChange:a,orientation:p,required:n=!1,value:u,...b}){let i=useRovingFocusGroupScope(e),s=(0,react_direction_namespaceObject.useDirection)(o),[x=[],k]=(0,react_use_controllable_state_namespaceObject.useControllableState)({defaultProp:c,onChange:a,prop:u}),m=(0,external_react_namespaceObject.useCallback)(e=>{k((c=[])=>[...c,e])},[k]),d=(0,external_react_namespaceObject.useCallback)(e=>{k((c=[])=>n&&1===c.length&&c[0]===e?c:c.filter(c=>c!==e))},[k,n]);return(0,jsx_runtime_namespaceObject.jsx)(CheckboxGroupContextProvider,{disabled:r,name:_,required:n,scope:e,value:x,onItemCheck:m,onItemUncheck:d,children:(0,jsx_runtime_namespaceObject.jsx)(react_roving_focus_namespaceObject.Root,{asChild:!0,...i,dir:s,loop:t,orientation:p,children:(0,jsx_runtime_namespaceObject.jsx)("div",{"data-disabled":r?"":void 0,dir:s,role:"group",...b})})})}const ITEM_NAME="CheckboxGroupItem";function CheckboxGroupItem({__scopeCheckboxGroup:e,disabled:c,...o}){let r=useCheckboxGroupContext("CheckboxGroupItem",e),t=r.disabled||c,_=useRovingFocusGroupScope(e),a=useCheckboxScope(e),p=r.value?.includes(o.value);return(0,jsx_runtime_namespaceObject.jsx)(react_roving_focus_namespaceObject.Item,{asChild:!0,..._,active:p,focusable:!t,children:(0,jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Root,{"aria-label":o.value,checked:p,disabled:t,name:r.name,required:r.required,...a,...o,onCheckedChange:e=>{e?r.onItemCheck(o.value):r.onItemUncheck(o.value)}})})}function CheckboxGroupIndicator({__scopeCheckboxGroup:e,...c}){let o=useCheckboxScope(e);return(0,jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Indicator,{...o,...c})}for(var __webpack_i__ in exports.CheckboxGroup=__webpack_exports__.CheckboxGroup,exports.CheckboxGroupIndicator=__webpack_exports__.CheckboxGroupIndicator,exports.CheckboxGroupItem=__webpack_exports__.CheckboxGroupItem,exports.Indicator=__webpack_exports__.Indicator,exports.Item=__webpack_exports__.Item,exports.Root=__webpack_exports__.Root,exports.createCheckboxGroupScope=__webpack_exports__.createCheckboxGroupScope,__webpack_exports__)-1===["CheckboxGroup","CheckboxGroupIndicator","CheckboxGroupItem","Indicator","Item","Root","createCheckboxGroupScope"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    createCheckboxGroupScope: ()=>createCheckboxGroupScope,
+    CheckboxGroup: ()=>CheckboxGroup,
+    CheckboxGroupItem: ()=>CheckboxGroupItem,
+    CheckboxGroupIndicator: ()=>CheckboxGroupIndicator,
+    Indicator: ()=>CheckboxGroupIndicator,
+    Item: ()=>CheckboxGroupItem,
+    Root: ()=>CheckboxGroup
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_checkbox_namespaceObject = require("@radix-ui/react-checkbox");
+const react_context_namespaceObject = require("@radix-ui/react-context");
+const react_direction_namespaceObject = require("@radix-ui/react-direction");
+const react_roving_focus_namespaceObject = require("@radix-ui/react-roving-focus");
+const react_use_controllable_state_namespaceObject = require("@radix-ui/react-use-controllable-state");
+const external_react_namespaceObject = require("react");
+const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
+const [createCheckboxGroupContext, createCheckboxGroupScope] = (0, react_context_namespaceObject.createContextScope)(CHECKBOX_GROUP_NAME, [
+    react_roving_focus_namespaceObject.createRovingFocusGroupScope,
+    react_checkbox_namespaceObject.createCheckboxScope
+]);
+const useRovingFocusGroupScope = (0, react_roving_focus_namespaceObject.createRovingFocusGroupScope)();
+const useCheckboxScope = (0, react_checkbox_namespaceObject.createCheckboxScope)();
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createCheckboxGroupContext(CHECKBOX_GROUP_NAME);
+function CheckboxGroup({ __scopeCheckboxGroup, defaultValue, dir, disabled = false, loop = true, name, onValueChange, orientation, required = false, value: valueProperty, ...props }) {
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const direction = (0, react_direction_namespaceObject.useDirection)(dir);
+    const [value = [], setValue] = (0, react_use_controllable_state_namespaceObject.useControllableState)({
+        defaultProp: defaultValue,
+        onChange: onValueChange,
+        prop: valueProperty
+    });
+    const handleItemCheck = (0, external_react_namespaceObject.useCallback)((itemValue)=>{
+        setValue((previousValue)=>[
+                ...previousValue ?? [],
+                itemValue
+            ]);
+    }, [
+        setValue
+    ]);
+    const handleItemUncheck = (0, external_react_namespaceObject.useCallback)((itemValue)=>{
+        setValue((previousValue)=>{
+            const currentValue = previousValue ?? [];
+            if (required && 1 === currentValue.length && currentValue[0] === itemValue) return currentValue;
+            return currentValue.filter((inputValue)=>inputValue !== itemValue);
+        });
+    }, [
+        setValue,
+        required
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CheckboxGroupContextProvider, {
+        disabled: disabled,
+        name: name,
+        required: required,
+        scope: __scopeCheckboxGroup,
+        value: value,
+        onItemCheck: handleItemCheck,
+        onItemUncheck: handleItemUncheck,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_roving_focus_namespaceObject.Root, {
+            asChild: true,
+            ...rovingFocusGroupScope,
+            dir: direction,
+            loop: loop,
+            orientation: orientation,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                "data-disabled": disabled ? '' : void 0,
+                dir: direction,
+                role: "group",
+                ...props
+            })
+        })
+    });
+}
+const ITEM_NAME = 'CheckboxGroupItem';
+function CheckboxGroupItem({ __scopeCheckboxGroup, disabled, ...props }) {
+    const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
+    const isDisabled = context.disabled || disabled;
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+    const checked = context.value?.includes(props.value);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_roving_focus_namespaceObject.Item, {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        active: checked,
+        focusable: !isDisabled,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Root, {
+            "aria-label": props.value,
+            checked: checked,
+            disabled: isDisabled,
+            name: context.name,
+            required: context.required,
+            ...checkboxScope,
+            ...props,
+            onCheckedChange: (checkedState)=>{
+                if (checkedState) context.onItemCheck(props.value);
+                else context.onItemUncheck(props.value);
+            }
+        })
+    });
+}
+function CheckboxGroupIndicator({ __scopeCheckboxGroup, ...props }) {
+    const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Indicator, {
+        ...checkboxScope,
+        ...props
+    });
+}
+exports.CheckboxGroup = __webpack_exports__.CheckboxGroup;
+exports.CheckboxGroupIndicator = __webpack_exports__.CheckboxGroupIndicator;
+exports.CheckboxGroupItem = __webpack_exports__.CheckboxGroupItem;
+exports.Indicator = __webpack_exports__.Indicator;
+exports.Item = __webpack_exports__.Item;
+exports.Root = __webpack_exports__.Root;
+exports.createCheckboxGroupScope = __webpack_exports__.createCheckboxGroupScope;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CheckboxGroup",
+    "CheckboxGroupIndicator",
+    "CheckboxGroupItem",
+    "Indicator",
+    "Item",
+    "Root",
+    "createCheckboxGroupScope"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -1,7 +1,7 @@
-import type { ComponentProps, JSX } from "react";
-import type { Scope } from "@radix-ui/react-context";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
+import type { Scope } from '@radix-ui/react-context';
+import type { ComponentProps, JSX } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
 /**
  * Type for components that can be scoped within the CheckboxGroup context
  */
@@ -54,7 +54,7 @@ interface CheckboxGroupBaseProps {
     /**
      * Direction for roving focus navigation
      */
-    dir?: RovingFocusGroup.RovingFocusGroupProps["dir"];
+    dir?: RovingFocusGroup.RovingFocusGroupProps['dir'];
     /**
      * Whether the entire checkbox group is disabled
      */
@@ -62,11 +62,11 @@ interface CheckboxGroupBaseProps {
     /**
      * Whether focus should loop to the start/end when reaching the boundaries
      */
-    loop?: RovingFocusGroup.RovingFocusGroupProps["loop"];
+    loop?: RovingFocusGroup.RovingFocusGroupProps['loop'];
     /**
      * Name attribute for the checkbox group form field
      */
-    name?: CheckboxGroupContextValue["name"];
+    name?: CheckboxGroupContextValue['name'];
     /**
      * Callback fired when the selected values change
      * @param value - The new array of selected values
@@ -75,7 +75,7 @@ interface CheckboxGroupBaseProps {
     /**
      * Orientation of the checkbox group (horizontal or vertical)
      */
-    orientation?: RovingFocusGroup.RovingFocusGroupProps["orientation"];
+    orientation?: RovingFocusGroup.RovingFocusGroupProps['orientation'];
     /**
      * Whether at least one checkbox must be selected
      */
@@ -83,12 +83,12 @@ interface CheckboxGroupBaseProps {
     /**
      * Controlled values for the checkbox group
      */
-    value?: CheckboxGroupContextValue["value"];
+    value?: CheckboxGroupContextValue['value'];
 }
 /**
  * Props for the CheckboxGroup component
  */
-type CheckboxGroupProps = CheckboxGroupBaseProps & ComponentProps<"div">;
+type CheckboxGroupProps = CheckboxGroupBaseProps & ComponentProps<'div'>;
 /**
  * CheckboxGroup component that manages a group of checkboxes with roving focus
  */
@@ -96,7 +96,7 @@ declare function CheckboxGroup({ __scopeCheckboxGroup, defaultValue, dir, disabl
 /**
  * Props for the CheckboxGroupItem component
  */
-interface CheckboxGroupItemProps extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "checked" | "defaultChecked" | "name" | "onCheckedChange"> {
+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
      */

package/dist/primitives/checkbox-group.js

@@ -1 +1,99 @@
-import{jsx as e}from"react/jsx-runtime";import{useCallback as o}from"react";import{Indicator as r,Root as t,createCheckboxScope as a}from"@radix-ui/react-checkbox";import{createContextScope as i}from"@radix-ui/react-context";import{useDirection as c}from"@radix-ui/react-direction";import{Item as n,Root as u,createRovingFocusGroupScope as d}from"@radix-ui/react-roving-focus";import{useControllableState as l}from"@radix-ui/react-use-controllable-state";let m="CheckboxGroup",[h,p]=i(m,[d,a]),x=d(),b=a(),[s,k]=h(m);function C({__scopeCheckboxGroup:r,defaultValue:t,dir:a,disabled:i=!1,loop:n=!0,name:d,onValueChange:m,orientation:h,required:p=!1,value:b,...k}){let C=x(r),f=c(a),[v=[],I]=l({defaultProp:t,onChange:m,prop:b}),G=o(e=>{I((o=[])=>[...o,e])},[I]),g=o(e=>{I((o=[])=>p&&1===o.length&&o[0]===e?o:o.filter(o=>o!==e))},[I,p]);return e(s,{disabled:i,name:d,required:p,scope:r,value:v,onItemCheck:G,onItemUncheck:g,children:e(u,{asChild:!0,...C,dir:f,loop:n,orientation:h,children:e("div",{"data-disabled":i?"":void 0,dir:f,role:"group",...k})})})}function f({__scopeCheckboxGroup:o,disabled:r,...a}){let i=k("CheckboxGroupItem",o),c=i.disabled||r,u=x(o),d=b(o),l=i.value?.includes(a.value);return e(n,{asChild:!0,...u,active:l,focusable:!c,children:e(t,{"aria-label":a.value,checked:l,disabled:c,name:i.name,required:i.required,...d,...a,onCheckedChange:e=>{e?i.onItemCheck(a.value):i.onItemUncheck(a.value)}})})}function v({__scopeCheckboxGroup:o,...t}){return e(r,{...b(o),...t})}export{C as CheckboxGroup,v as CheckboxGroupIndicator,f as CheckboxGroupItem,v as Indicator,f as Item,C as Root,p as createCheckboxGroupScope};
+import { jsx } from "react/jsx-runtime";
+import { Indicator, Root, createCheckboxScope } from "@radix-ui/react-checkbox";
+import { createContextScope } from "@radix-ui/react-context";
+import { useDirection } from "@radix-ui/react-direction";
+import { Item, Root as react_roving_focus_Root, createRovingFocusGroupScope } from "@radix-ui/react-roving-focus";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useCallback } from "react";
+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);
+function CheckboxGroup({ __scopeCheckboxGroup, defaultValue, dir, disabled = false, loop = true, name, onValueChange, orientation, required = false, value: valueProperty, ...props }) {
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const direction = useDirection(dir);
+    const [value = [], setValue] = useControllableState({
+        defaultProp: defaultValue,
+        onChange: onValueChange,
+        prop: valueProperty
+    });
+    const handleItemCheck = useCallback((itemValue)=>{
+        setValue((previousValue)=>[
+                ...previousValue ?? [],
+                itemValue
+            ]);
+    }, [
+        setValue
+    ]);
+    const handleItemUncheck = useCallback((itemValue)=>{
+        setValue((previousValue)=>{
+            const currentValue = previousValue ?? [];
+            if (required && 1 === currentValue.length && currentValue[0] === itemValue) return currentValue;
+            return currentValue.filter((inputValue)=>inputValue !== itemValue);
+        });
+    }, [
+        setValue,
+        required
+    ]);
+    return /*#__PURE__*/ jsx(CheckboxGroupContextProvider, {
+        disabled: disabled,
+        name: name,
+        required: required,
+        scope: __scopeCheckboxGroup,
+        value: value,
+        onItemCheck: handleItemCheck,
+        onItemUncheck: handleItemUncheck,
+        children: /*#__PURE__*/ jsx(react_roving_focus_Root, {
+            asChild: true,
+            ...rovingFocusGroupScope,
+            dir: direction,
+            loop: loop,
+            orientation: orientation,
+            children: /*#__PURE__*/ jsx("div", {
+                "data-disabled": disabled ? '' : void 0,
+                dir: direction,
+                role: "group",
+                ...props
+            })
+        })
+    });
+}
+const ITEM_NAME = 'CheckboxGroupItem';
+function CheckboxGroupItem({ __scopeCheckboxGroup, disabled, ...props }) {
+    const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
+    const isDisabled = context.disabled || disabled;
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+    const checked = context.value?.includes(props.value);
+    return /*#__PURE__*/ jsx(Item, {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        active: checked,
+        focusable: !isDisabled,
+        children: /*#__PURE__*/ jsx(Root, {
+            "aria-label": props.value,
+            checked: checked,
+            disabled: isDisabled,
+            name: context.name,
+            required: context.required,
+            ...checkboxScope,
+            ...props,
+            onCheckedChange: (checkedState)=>{
+                if (checkedState) context.onItemCheck(props.value);
+                else context.onItemUncheck(props.value);
+            }
+        })
+    });
+}
+function CheckboxGroupIndicator({ __scopeCheckboxGroup, ...props }) {
+    const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+    return /*#__PURE__*/ jsx(Indicator, {
+        ...checkboxScope,
+        ...props
+    });
+}
+export { CheckboxGroup, CheckboxGroupIndicator, CheckboxGroupItem, CheckboxGroupIndicator as Indicator, CheckboxGroupItem as Item, CheckboxGroup as Root, createCheckboxGroupScope };