@infonomic/uikit 5.44.0 → 6.0.0

package/dist/components/dropdown/dropdown.d.ts

@@ -1,56 +1,70 @@
 import type React from 'react';
-import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
-declare function Root({ children, ...rest }: DropdownMenuPrimitive.DropdownMenuProps): React.JSX.Element;
-declare function Portal({ children, ...rest }: DropdownMenuPrimitive.DropdownMenuPortalProps): React.JSX.Element;
-declare function Sub({ children, ...rest }: DropdownMenuPrimitive.DropdownMenuSubProps): React.JSX.Element;
+import { Menu } from '@base-ui/react/menu';
+declare function Root({ children, ...rest }: React.ComponentProps<typeof Menu.Root>): React.JSX.Element;
+declare function Portal({ children, ...rest }: React.ComponentProps<typeof Menu.Portal>): React.JSX.Element;
+declare function Sub({ children, ...rest }: React.ComponentProps<typeof Menu.SubmenuRoot>): React.JSX.Element;
 export declare const Dropdown: {
     Root: typeof Root;
     Trigger: {
-        ({ ref, className, children, ...rest }: DropdownMenuPrimitive.DropdownMenuTriggerProps & {
+        ({ ref, className, children, ...rest }: React.ComponentProps<typeof Menu.Trigger> & {
             ref?: React.RefObject<React.ComponentRef<"button">>;
         }): React.JSX.Element;
         displayName: string;
     };
     Portal: typeof Portal;
     Content: {
-        ({ ref, className, children, ...rest }: DropdownMenuPrimitive.DropdownMenuContentProps & {
+        ({ ref, className, children, side, sideOffset, align, alignOffset, collisionPadding, ...rest }: {
             ref?: React.RefObject<React.ComponentRef<"div">>;
-        }): React.JSX.Element;
+            className?: string;
+            children?: React.ReactNode;
+            side?: React.ComponentProps<typeof Menu.Positioner>["side"];
+            sideOffset?: React.ComponentProps<typeof Menu.Positioner>["sideOffset"];
+            align?: React.ComponentProps<typeof Menu.Positioner>["align"];
+            alignOffset?: React.ComponentProps<typeof Menu.Positioner>["alignOffset"];
+            collisionPadding?: React.ComponentProps<typeof Menu.Positioner>["collisionPadding"];
+        } & Omit<React.ComponentProps<typeof Menu.Popup>, "className">): React.JSX.Element;
         displayName: string;
     };
     Group: {
-        ({ ref, className, children, ...rest }: DropdownMenuPrimitive.DropdownMenuGroupProps & {
+        ({ ref, className, children, ...rest }: React.ComponentProps<typeof Menu.Group> & {
             ref?: React.RefObject<React.ComponentRef<"div">>;
         }): React.JSX.Element;
         displayName: string;
     };
     Item: {
-        ({ ref, className, children, ...rest }: DropdownMenuPrimitive.DropdownMenuItemProps & {
+        ({ ref, className, children, ...rest }: React.ComponentProps<typeof Menu.Item> & {
             ref?: React.RefObject<React.ComponentRef<"div">>;
         }): React.JSX.Element;
         displayName: string;
     };
     Label: {
-        ({ ref, className, children, ...rest }: DropdownMenuPrimitive.DropdownMenuLabelProps & {
+        ({ ref, className, children, ...rest }: React.ComponentProps<typeof Menu.GroupLabel> & {
             ref?: React.RefObject<React.ComponentRef<"div">>;
         }): React.JSX.Element;
         displayName: string;
     };
     Separator: {
-        ({ ref, className, ...props }: DropdownMenuPrimitive.DropdownMenuSeparatorProps & {
+        ({ ref, className, ...props }: React.ComponentProps<typeof Menu.Separator> & {
             ref?: React.RefObject<React.ComponentRef<"div">>;
         }): React.JSX.Element;
         displayName: string;
     };
     Sub: typeof Sub;
     SubContent: {
-        ({ ref, className, children, ...rest }: DropdownMenuPrimitive.DropdownMenuSubContentProps & {
+        ({ ref, className, children, side, sideOffset, align, alignOffset, collisionPadding, ...rest }: {
             ref?: React.RefObject<React.ComponentRef<"div">>;
-        }): React.JSX.Element;
+            className?: string;
+            children?: React.ReactNode;
+            side?: React.ComponentProps<typeof Menu.Positioner>["side"];
+            sideOffset?: React.ComponentProps<typeof Menu.Positioner>["sideOffset"];
+            align?: React.ComponentProps<typeof Menu.Positioner>["align"];
+            alignOffset?: React.ComponentProps<typeof Menu.Positioner>["alignOffset"];
+            collisionPadding?: React.ComponentProps<typeof Menu.Positioner>["collisionPadding"];
+        } & Omit<React.ComponentProps<typeof Menu.Popup>, "className">): React.JSX.Element;
         displayName: string;
     };
     SubTrigger: {
-        ({ ref, className, children, ...rest }: DropdownMenuPrimitive.DropdownMenuSubTriggerProps & {
+        ({ ref, className, children, ...rest }: React.ComponentProps<typeof Menu.SubmenuTrigger> & {
             ref?: React.RefObject<React.ComponentRef<"div">>;
         }): React.JSX.Element;
         displayName: string;

package/dist/components/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAIhE,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,CAAC,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAE/F;AAsBD,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,qBAAqB,CAAC,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAEnE;AAmGD,iBAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,CAAC,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAEjG;AA0CD,eAAO,MAAM,QAAQ;;;gDAnKlB,qBAAqB,CAAC,wBAAwB,GAAG;YAClD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAA;SACpD,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;;gDAyBlB,qBAAqB,CAAC,wBAAwB,GAAG;YAClD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;SACjD,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;gDAkBlB,qBAAqB,CAAC,sBAAsB,GAAG;YAChD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;SACjD,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;gDAkBlB,qBAAqB,CAAC,qBAAqB,GAAG;YAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;SACjD,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;gDAkBlB,qBAAqB,CAAC,sBAAsB,GAAG;YAChD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;SACjD,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;uCAiBlB,qBAAqB,CAAC,0BAA0B,GAAG;YACpD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;SACjD,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;;gDAoBlB,qBAAqB,CAAC,2BAA2B,GAAG;YACrD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;SACjD,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;gDAkBlB,qBAAqB,CAAC,2BAA2B,GAAG;YACrD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;SACjD,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;CAyBpB,CAAA"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/dropdown/dropdown.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
 import classnames from "classnames";
-import { DropdownMenu } from "radix-ui";
 import dropdown_module from "./dropdown.module.js";
 function Root({ children, ...rest }) {
-    return /*#__PURE__*/ jsx(DropdownMenu.Root, {
+    return /*#__PURE__*/ jsx(Menu.Root, {
         ...rest,
         children: children
     });
 }
-const Trigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(DropdownMenu.Trigger, {
+const Trigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Trigger, {
         className: classnames('infonomic-dropdown-trigger', className),
         ref: ref,
         ...rest,
@@ -17,59 +17,73 @@ const Trigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Dropd
     });
 Trigger.displayName = 'Trigger';
 function Portal({ children, ...rest }) {
-    return /*#__PURE__*/ jsx(DropdownMenu.Portal, {
+    return /*#__PURE__*/ jsx(Menu.Portal, {
         ...rest,
         children: children
     });
 }
-const Content = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(DropdownMenu.Content, {
-        ref: ref,
-        className: classnames('infonomic-dropdown-content', dropdown_module["dropdown-content"], className),
-        ...rest,
-        children: children
+const Content = ({ ref, className, children, side, sideOffset, align, alignOffset, collisionPadding, ...rest })=>/*#__PURE__*/ jsx(Menu.Positioner, {
+        side: side,
+        sideOffset: sideOffset,
+        align: align,
+        alignOffset: alignOffset,
+        collisionPadding: collisionPadding,
+        children: /*#__PURE__*/ jsx(Menu.Popup, {
+            ref: ref,
+            className: classnames('infonomic-dropdown-content', dropdown_module["dropdown-content"], className),
+            ...rest,
+            children: children
+        })
     });
 Content.displayName = 'Content';
-const Group = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(DropdownMenu.Group, {
+const Group = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Group, {
         ref: ref,
         className: classnames('infonomic-dropdown-group', className),
         ...rest,
         children: children
     });
 Group.displayName = 'Group';
-const Item = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(DropdownMenu.Item, {
+const Item = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Item, {
         ref: ref,
         className: classnames('infonomic-dropdown-item', dropdown_module["dropdown-item"], className),
         ...rest,
         children: children
     });
 Item.displayName = 'Item';
-const Label = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(DropdownMenu.Label, {
+const Label = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.GroupLabel, {
         ref: ref,
         className: classnames('infonomic-dropdown-label', className),
         ...rest,
         children: children
     });
 Label.displayName = 'Label';
-const Separator = ({ ref, className, ...props })=>/*#__PURE__*/ jsx(DropdownMenu.Separator, {
+const Separator = ({ ref, className, ...props })=>/*#__PURE__*/ jsx(Menu.Separator, {
         ref: ref,
         className: classnames('infonomic-dropdown-separator', dropdown_module["dropdown-separator"], className),
         ...props
     });
 Separator.displayName = 'Separator';
 function Sub({ children, ...rest }) {
-    return /*#__PURE__*/ jsx(DropdownMenu.Sub, {
+    return /*#__PURE__*/ jsx(Menu.SubmenuRoot, {
         ...rest,
         children: children
     });
 }
-const SubContent = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(DropdownMenu.SubContent, {
-        ref: ref,
-        className: classnames('infonomic-dropdown-subcontent', dropdown_module["dropdown-subcontent"], className),
-        ...rest,
-        children: children
+const SubContent = ({ ref, className, children, side, sideOffset, align, alignOffset, collisionPadding, ...rest })=>/*#__PURE__*/ jsx(Menu.Positioner, {
+        side: side,
+        sideOffset: sideOffset,
+        align: align,
+        alignOffset: alignOffset,
+        collisionPadding: collisionPadding,
+        children: /*#__PURE__*/ jsx(Menu.Popup, {
+            ref: ref,
+            className: classnames('infonomic-dropdown-subcontent', dropdown_module["dropdown-subcontent"], className),
+            ...rest,
+            children: children
+        })
     });
 SubContent.displayName = 'SubContent';
-const SubTrigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(DropdownMenu.SubTrigger, {
+const SubTrigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.SubmenuTrigger, {
         ref: ref,
         className: classnames('infonomic-dropdown-subtrigger', className),
         ...rest,

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

@@ -1,5 +1,5 @@
 /**
- * @file Calendar component using react-day-picker and radix-ui
+ * @file Calendar component using react-day-picker and @base-ui/react
  * @see https://github.com/Maliksidk19/shadcn-datetime-picker/
  * Portions copyright (c) 2023 Maliksidk19 licensed under the MIT
  * license found in the LICENSE file in the root directory of this source tree.

package/dist/components/forms/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/forms/calendar.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,kBAAkB,CAAA;AAOzB,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAsB,EACtB,UAAU,EAAE,gBAAgB,EAC5B,GAAG,KAAK,EACT,EAAE,aAAa,qBAmHf;yBA3He,QAAQ"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/forms/calendar.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,kBAAkB,CAAA;AAOzB,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAsB,EACtB,UAAU,EAAE,gBAAgB,EAC5B,GAAG,KAAK,EACT,EAAE,aAAa,qBA6Hf;yBArIe,QAAQ"}

package/dist/components/forms/calendar.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
+import { Select } from "@base-ui/react/select";
 import classnames from "classnames";
-import { Select } from "radix-ui";
 import { DayPicker } from "react-day-picker";
 import { ChevronsUpDown } from "../../icons/chevrons-up-down.js";
 import { Button } from "../button/button.js";
@@ -31,51 +31,60 @@ function Calendar({ ref, className, classNames, hideNavigation, showOutsideDays
     const _hiddenClassName = classnames(calendar_module.hidden, props.hiddenClassName);
     const Dropdown = useCallback(({ value, onChange, options })=>{
         const selected = options?.find((option)=>option.value === value);
-        const handleChange = (value)=>{
+        const handleChange = (newValue)=>{
             const changeEvent = {
                 target: {
-                    value
+                    value: newValue
                 }
             };
             onChange?.(changeEvent);
         };
         return /*#__PURE__*/ jsxs(Select.Root, {
             value: value?.toString(),
-            onValueChange: (value)=>{
-                handleChange(value);
+            onValueChange: (newValue)=>{
+                handleChange(newValue);
             },
             children: [
-                /*#__PURE__*/ jsx(Select.Trigger, {
-                    asChild: true,
-                    children: /*#__PURE__*/ jsxs(Button, {
+                /*#__PURE__*/ jsxs(Select.Trigger, {
+                    render: /*#__PURE__*/ jsx(Button, {
                         variant: "outlined",
                         size: "sm",
-                        className: classnames(calendar_module["select-trigger"], props.selectTriggerClassName),
-                        children: [
-                            /*#__PURE__*/ jsx(Select.Value, {
-                                children: selected?.label
-                            }),
-                            /*#__PURE__*/ jsx(ChevronsUpDown, {
+                        className: classnames(calendar_module["select-trigger"], props.selectTriggerClassName)
+                    }),
+                    children: [
+                        /*#__PURE__*/ jsx(Select.Value, {
+                            children: ()=>selected?.label
+                        }),
+                        /*#__PURE__*/ jsx(Select.Icon, {
+                            children: /*#__PURE__*/ jsx(ChevronsUpDown, {
                                 height: "18px",
                                 width: "18px",
                                 svgClassName: calendar_module["select-chevrons"]
                             })
-                        ]
-                    })
+                        })
+                    ]
                 }),
-                /*#__PURE__*/ jsx(Select.Content, {
-                    className: calendar_module["select-content"],
-                    position: "popper",
-                    sideOffset: 4,
-                    align: "center",
-                    children: /*#__PURE__*/ jsx(ScrollArea, {
-                        className: classnames(calendar_module["scroll-area"]),
-                        children: options?.map(({ value, label, disabled }, id)=>/*#__PURE__*/ jsx(Select.Item, {
-                                className: calendar_module["select-item"],
-                                value: value?.toString(),
-                                disabled: disabled,
-                                children: label
-                            }, `${value}-${id}`))
+                /*#__PURE__*/ jsx(Select.Portal, {
+                    children: /*#__PURE__*/ jsx(Select.Positioner, {
+                        className: calendar_module["select-content"],
+                        sideOffset: 4,
+                        align: "center",
+                        alignItemWithTrigger: false,
+                        children: /*#__PURE__*/ jsx(Select.Popup, {
+                            children: /*#__PURE__*/ jsx(ScrollArea, {
+                                className: classnames(calendar_module["scroll-area"]),
+                                children: /*#__PURE__*/ jsx(Select.List, {
+                                    children: options?.map(({ value, label, disabled }, id)=>/*#__PURE__*/ jsx(Select.Item, {
+                                            className: calendar_module["select-item"],
+                                            value: value?.toString(),
+                                            disabled: disabled,
+                                            children: /*#__PURE__*/ jsx(Select.ItemText, {
+                                                children: label
+                                            })
+                                        }, `${value}-${id}`))
+                                })
+                            })
+                        })
                     })
                 })
             ]

package/dist/components/forms/checkbox.astro

@@ -71,11 +71,13 @@ const {
         checkBoxClasses,
         className
       ]}
-      data-state={checked ? 'checked' : 'unchecked'}
+      data-checked={checked ? '' : undefined}
+      data-unchecked={!checked ? '' : undefined}
     >
       <span
         class:list={['checkbox-indicator', styles.indicator]}
-        data-state={checked ? 'checked' : 'unchecked'}
+        data-checked={checked ? '' : undefined}
+        data-unchecked={!checked ? '' : undefined}
       >
         <CheckIcon class={styles.icon} />
       </span>
@@ -110,17 +112,20 @@ const {
       const indicator = visualCheckbox?.querySelector('.checkbox-indicator')
 
       if (visualCheckbox && indicator) {
+        const updateState = (checked: boolean) => {
+          for (const el of [visualCheckbox, indicator]) {
+            el.toggleAttribute('data-checked', checked)
+            el.toggleAttribute('data-unchecked', !checked)
+          }
+        }
+
         // Update state on change
         checkboxInput.addEventListener('change', () => {
-          const state = checkboxInput.checked ? 'checked' : 'unchecked'
-          visualCheckbox.setAttribute('data-state', state)
-          indicator.setAttribute('data-state', state)
+          updateState(checkboxInput.checked)
         })
 
         // Ensure initial state is correct
-        const state = checkboxInput.checked ? 'checked' : 'unchecked'
-        visualCheckbox.setAttribute('data-state', state)
-        indicator.setAttribute('data-state', state)
+        updateState(checkboxInput.checked)
       }
     })
   }

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

@@ -1,6 +1,7 @@
 import type * as React from 'react';
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import type { Intent, Size, Variant } from './@types/checkbox.js';
-export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface Props {
     id: string;
     name: string;
     label?: string;
@@ -9,6 +10,7 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     intent?: Intent;
     reverse?: boolean;
     checked?: boolean;
+    disabled?: boolean;
     className?: string;
     checkBoxClasses?: string;
     containerClasses?: string;
@@ -17,7 +19,9 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     error?: boolean;
     helpText?: string;
     errorText?: string;
-    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    onCheckedChange?: React.ComponentProps<typeof CheckboxPrimitive.Root>['onCheckedChange'];
+    onClick?: React.MouseEventHandler;
+    'aria-label'?: string;
 }
 export declare const Checkbox: ({ ref, id, name, label, variant, size, intent, reverse, className, checkBoxClasses, containerClasses, componentClasses, labelClasses, error, helpText, errorText, ...rest }: Props & {
     ref?: React.RefObject<HTMLButtonElement>;

package/dist/components/forms/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AASnC,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAEjE,MAAM,WAAW,KAAM,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,KAAK,IAAI,CAAA;CAC/D;AAED,eAAO,MAAM,QAAQ,GAAqB,6KAkBvC,KAAK,GAAG;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC,KAAG,KAAK,CAAC,GAAG,CAAC,OAkDb,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAOvE,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAEjE,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAA;IACxF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,QAAQ,GAAqB,6KAkBvC,KAAK,GAAG;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC,KAAG,KAAK,CAAC,GAAG,CAAC,OAoDb,CAAA"}

package/dist/components/forms/checkbox.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as checkbox_Checkbox } from "@base-ui/react/checkbox";
 import classnames from "classnames";
-import { Checkbox as external_radix_ui_Checkbox, Label } from "radix-ui";
 import { CheckIcon } from "../../icons/check-icon.js";
 import checkbox_module from "./checkbox.module.js";
 import { ErrorText } from "./error-text.js";
 import { HelpText } from "./help-text.js";
-const checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined', size = 'md', intent = 'primary', reverse = false, className, checkBoxClasses, containerClasses, componentClasses, labelClasses, error = false, helpText = '', errorText = '', ...rest }) {
+const forms_checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined', size = 'md', intent = 'primary', reverse = false, className, checkBoxClasses, containerClasses, componentClasses, labelClasses, error = false, helpText = '', errorText = '', ...rest }) {
     return /*#__PURE__*/ jsxs("div", {
         className: classnames('infonomic-checkbox-container', checkbox_module.container, containerClasses),
         children: [
@@ -15,21 +15,25 @@ const checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined',
                     [checkbox_module.reverse]: reverse
                 }),
                 children: [
-                    /*#__PURE__*/ jsx(external_radix_ui_Checkbox.Root, {
+                    /*#__PURE__*/ jsx(checkbox_Checkbox.Root, {
                         ref: ref,
                         id: id,
                         name: name,
+                        nativeButton: true,
+                        render: /*#__PURE__*/ jsx("button", {
+                            type: "button"
+                        }),
                         className: classnames('infonomic-checkbox', `infonomic-checkbox-${variant}`, `infonomic-checkbox-${size}`, `infonomic-checkbox-${intent}`, checkbox_module.checkbox, checkbox_module[variant], checkbox_module[size], checkbox_module[intent], checkBoxClasses, className),
                         ...rest,
-                        children: /*#__PURE__*/ jsx(external_radix_ui_Checkbox.Indicator, {
-                            forceMount: true,
+                        children: /*#__PURE__*/ jsx(checkbox_Checkbox.Indicator, {
+                            keepMounted: true,
                             className: classnames('infonomic-checkbox-indicator', checkbox_module.indicator),
                             children: /*#__PURE__*/ jsx(CheckIcon, {
                                 className: checkbox_module.icon
                             })
                         })
                     }),
-                    null != label && /*#__PURE__*/ jsx(Label.Label, {
+                    null != label && /*#__PURE__*/ jsx("label", {
                         htmlFor: id,
                         className: classnames('infonomic-checkbox-label', checkbox_module.label, labelClasses),
                         children: label
@@ -47,4 +51,4 @@ const checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined',
         ]
     });
 };
-export { checkbox_Checkbox as Checkbox };
+export { forms_checkbox_Checkbox as Checkbox };

package/dist/components/forms/checkbox.module.css

@@ -32,22 +32,19 @@ infonomic-components;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    outline: 1px solid transparent;
+    outline-offset: 2px;
     border-radius: var(--border-radius-sm);
     transition: all var(--transition-normal);
   }
 
-  .checkbox[data-state="checked"],
-  :global(.infonomic-checkbox)[data-state="checked"] {
-    --ring-offset-color: var(--background);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  .checkbox[data-checked],
+  :global(.infonomic-checkbox)[data-checked] {
+    outline-color: var(--ring-color);
   }
 
-  .checkbox:disabled,
-  :global(.infonomic-checkbox):disabled,
-  .checkbox[disabled],
-  :global(.infonomic-checkbox)[disabled] {
+  .checkbox[data-disabled],
+  :global(.infonomic-checkbox)[data-disabled] {
     pointer-events: none;
   }
 
@@ -74,16 +71,16 @@ infonomic-components;
   }
 
   /* Style for the "checked" state — animation overrides the transition for bouncy entry */
-  .indicator[data-state="checked"] .icon,
-  :global(.infonomic-checkbox-indicator)[data-state="checked"] :global(.infonomic-checkbox-icon) {
+  .indicator[data-checked] .icon,
+  :global(.infonomic-checkbox-indicator)[data-checked] :global(.infonomic-checkbox-icon) {
     animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
     opacity: 1;
     transform: scale(1);
   }
 
   /* Style for the "unchecked" state — no animation, let the CSS transition handle the exit */
-  .indicator[data-state="unchecked"] .icon,
-  :global(.infonomic-checkbox-indicator)[data-state="unchecked"] :global(.infonomic-checkbox-icon) {
+  .indicator[data-unchecked] .icon,
+  :global(.infonomic-checkbox-indicator)[data-unchecked] :global(.infonomic-checkbox-icon) {
     opacity: 0;
     transform: scale(0.8);
   }
@@ -96,10 +93,8 @@ infonomic-components;
     color: var(--label-color);
   }
 
-  .checkbox:disabled~.label,
-  .checkbox[disabled]~.label,
-  :global(.infonomic-checkbox):disabled~ :global(.infonomic-checkbox-label),
-  :global(.infonomic-checkbox)[disabled]~ :global(.infonomic-checkbox-label) {
+  .checkbox[data-disabled]~.label,
+  :global(.infonomic-checkbox)[data-disabled]~ :global(.infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -169,8 +164,8 @@ infonomic-components;
     --checkbox-icon-color: white;
   }
 
-  .outlined[data-state="checked"],
-  :global(.infonomic-checkbox-outlined)[data-state="checked"] {
+  .outlined[data-checked],
+  :global(.infonomic-checkbox-outlined)[data-checked] {
     --ring-color: var(--checkbox-variant-outline-ring-color);
     background-color: var(--checkbox-variant-outlined);
   }
@@ -181,6 +176,11 @@ infonomic-components;
     --checkbox-icon-color: white;
   }
 
+  .filled[data-checked],
+  :global(.infonomic-checkbox-filled)[data-checked] {
+    --ring-color: var(--checkbox-variant-outline-ring-color);
+  }
+
   /* Intents */
   .primary,
   :global(.infonomic-checkbox-primary) {

package/dist/components/forms/checkbox_module.css

@@ -19,21 +19,20 @@
   }
 
   :is(.checkbox-FiKZnf, .infonomic-checkbox) {
+    outline-offset: 2px;
     border-radius: var(--border-radius-sm);
     transition: all var(--transition-normal);
+    outline: 1px solid #0000;
     justify-content: center;
     align-items: center;
     display: inline-flex;
   }
 
-  :is(.checkbox-FiKZnf[data-state="checked"], .infonomic-checkbox[data-state="checked"]) {
-    --ring-offset-color: var(--background);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  :is(.checkbox-FiKZnf[data-checked], .infonomic-checkbox[data-checked]) {
+    outline-color: var(--ring-color);
   }
 
-  :is(.checkbox-FiKZnf:disabled, .infonomic-checkbox:disabled, .checkbox-FiKZnf[disabled], .infonomic-checkbox[disabled]) {
+  :is(.checkbox-FiKZnf[data-disabled], .infonomic-checkbox[data-disabled]) {
     pointer-events: none;
   }
 
@@ -52,13 +51,13 @@
     transform: scale(.8);
   }
 
-  :is(.indicator-uDQYoF[data-state="checked"] .icon-gwRvT_, .infonomic-checkbox-indicator[data-state="checked"] .infonomic-checkbox-icon) {
+  :is(.indicator-uDQYoF[data-checked] .icon-gwRvT_, .infonomic-checkbox-indicator[data-checked] .infonomic-checkbox-icon) {
     opacity: 1;
     animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards checkBoxIn-DSnbUl;
     transform: scale(1);
   }
 
-  :is(.indicator-uDQYoF[data-state="unchecked"] .icon-gwRvT_, .infonomic-checkbox-indicator[data-state="unchecked"] .infonomic-checkbox-icon) {
+  :is(.indicator-uDQYoF[data-unchecked] .icon-gwRvT_, .infonomic-checkbox-indicator[data-unchecked] .infonomic-checkbox-icon) {
     opacity: 0;
     transform: scale(.8);
   }
@@ -70,7 +69,7 @@
     font-weight: 500;
   }
 
-  :is(.checkbox-FiKZnf:disabled ~ .label-rsCVhp, .checkbox-FiKZnf[disabled] ~ .label-rsCVhp, .infonomic-checkbox:disabled ~ .infonomic-checkbox-label, .infonomic-checkbox[disabled] ~ .infonomic-checkbox-label) {
+  :is(.checkbox-FiKZnf[data-disabled] ~ .label-rsCVhp, .infonomic-checkbox[data-disabled] ~ .infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -117,7 +116,7 @@
     --checkbox-icon-color: white;
   }
 
-  :is(.outlined-VB1vGz[data-state="checked"], .infonomic-checkbox-outlined[data-state="checked"]) {
+  :is(.outlined-VB1vGz[data-checked], .infonomic-checkbox-outlined[data-checked]) {
     --ring-color: var(--checkbox-variant-outline-ring-color);
     background-color: var(--checkbox-variant-outlined);
   }
@@ -127,6 +126,10 @@
     --checkbox-icon-color: white;
   }
 
+  :is(.filled-aCYMdF[data-checked], .infonomic-checkbox-filled[data-checked]) {
+    --ring-color: var(--checkbox-variant-outline-ring-color);
+  }
+
   :is(.primary-OnpxZl, .infonomic-checkbox-primary) {
     --checkbox-variant-outlined-border: var(--fill-primary-strong);
     --checkbox-variant-outlined: var(--fill-primary-strong);