musae 0.2.5 → 0.2.7

package/README.md

@@ -6,14 +6,14 @@
 - 📦 A set of high-quality React components out of the box.
 - 🛡 Written in TypeScript with predictable static types.
 - ⚙️ Whole package of design resources and development tools.
-- 🌍 Internationalization support for dozens of languages.
 - 🎨 Powerful theme customization based on CSS-in-JS.
 
 ## 📦 Install
 
 ```bash
 npm install musae
-## pnpm i musae
+## pnpm add musae
+## yarn add musae
 ```
 
 ## 🔨 Usage
@@ -23,4 +23,6 @@ import React from "react";
 import { Button } from "musae";
 
 const App = () => <Button>PRESS ME</Button>;
+
+export default App;
 ```

package/dist/components/avatar/avatar.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/breadcrumb/item.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';

package/dist/components/button/button.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { ComponentToken, ButtonClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { useButton } from './hooks.js';
 import Ripple from '../ripple/ripple.js';
@@ -25,46 +25,44 @@ const styles = {
     transitionProperty: "musae-fagghw",
     transitionDuration: "musae-1d8287x",
     willChange: "musae-19v51jg",
+    flexShrink: "musae-2lah0s",
     $$css: true
   },
   small: {
-    padding: "musae-aubp7",
-    paddingInline: null,
+    paddingBlock: "musae-hwhe2e",
+    paddingTop: null,
+    paddingBottom: null,
+    paddingInline: "musae-sslq2m",
     paddingStart: null,
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
     minHeight: "musae-1sal0kv",
     minWidth: "musae-trrjuf",
     $$css: true
   },
   medium: {
-    padding: "musae-wygk8u",
-    paddingInline: null,
+    paddingBlock: "musae-mcngwa",
+    paddingTop: null,
+    paddingBottom: null,
+    paddingInline: "musae-12vixxq",
     paddingStart: null,
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
     minHeight: "musae-1infgec",
     minWidth: "musae-ba7gwn",
     $$css: true
   },
   large: {
-    padding: "musae-1f5cgw",
-    paddingInline: null,
+    paddingBlock: "musae-avjae4",
+    paddingTop: null,
+    paddingBottom: null,
+    paddingInline: "musae-1mmg125",
     paddingStart: null,
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
     minHeight: "musae-1ee7i9g",
     minWidth: "musae-1049mhy",
     $$css: true

package/dist/components/calendar/calendar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import Button from '../button/button.js';

package/dist/components/calendar/hooks.js

@@ -5,7 +5,7 @@ import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
 import { toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
@@ -41,21 +41,21 @@ const styles = {
     $$css: true
   },
   range: {
-    "::before_insetInlineStart": "musae-1kfboi8",
+    "::before_insetInlineStart": "musae-1682cnc",
     "::before_left": null,
     "::before_right": null,
-    "::before_insetInlineEnd": "musae-1x8jx26",
+    "::before_insetInlineEnd": "musae-typ5od",
     $$css: true
   },
   from: {
     "::before_insetInlineStart": "musae-fbisj7",
     "::before_left": null,
     "::before_right": null,
-    "::before_insetInlineEnd": "musae-1x8jx26",
+    "::before_insetInlineEnd": "musae-typ5od",
     $$css: true
   },
   to: {
-    "::before_insetInlineStart": "musae-1kfboi8",
+    "::before_insetInlineStart": "musae-1682cnc",
     "::before_left": null,
     "::before_right": null,
     "::before_insetInlineEnd": "musae-1gkks1t",

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CheckboxProps } from "./types";
-declare const Checkbox: ({ value, className, style, children, ...props }: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: ({ value, className, style, children, onChange, disabled, checked }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/dist/components/checkbox/checkbox.js

@@ -1,141 +1,188 @@
-import React, { useContext, useMemo, useCallback } from 'react';
-import { useControlledState } from '@aiszlab/relax';
+import React, { useContext, useMemo } from 'react';
+import { useControlledState, useEvent } from '@aiszlab/relax';
 import Context from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CheckboxClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 
 const styles = {
-  trigger: props => [{
-    margin: "musae-ieb5ut",
-    marginInline: null,
-    marginInlineStart: null,
-    marginLeft: null,
-    marginInlineEnd: null,
-    marginRight: null,
-    marginBlock: null,
-    marginTop: null,
-    marginBottom: null,
-    visibility: "musae-lshs6z",
-    cursor: "musae-mper1u",
-    width: "musae-r8isjd",
-    height: "musae-1gfonl1",
-    position: "musae-1n2onr6",
-    "::before_content": "musae-1cpjm7i",
-    "::before_visibility": "musae-11srvyv",
-    "::before_display": "musae-1fgarty",
-    "::before_boxSizing": "musae-tql2tq",
-    "::before_width": "musae-1el3b87",
-    "::before_height": "musae-1prtdg5",
-    "::before_borderRadius": "musae-10eoie5",
-    "::before_borderStartStartRadius": null,
-    "::before_borderStartEndRadius": null,
-    "::before_borderEndStartRadius": null,
-    "::before_borderEndEndRadius": null,
-    "::before_borderTopLeftRadius": null,
-    "::before_borderTopRightRadius": null,
-    "::before_borderBottomLeftRadius": null,
-    "::before_borderBottomRightRadius": null,
-    "::before_transition": "musae-t448kv",
-    "::before_transitionBehavior": null,
-    "::before_transitionDelay": null,
-    "::before_transitionDuration": null,
-    "::before_transitionProperty": null,
-    "::before_transitionTimingFunction": null,
-    "::before_borderWidth": "musae-1lou4sy",
-    "::before_borderInlineWidth": null,
-    "::before_borderInlineStartWidth": null,
-    "::before_borderLeftWidth": null,
-    "::before_borderInlineEndWidth": null,
-    "::before_borderRightWidth": null,
-    "::before_borderBlockWidth": null,
-    "::before_borderTopWidth": null,
-    "::before_borderBottomWidth": null,
-    "::before_borderStyle": "musae-1fo1fc9",
-    "::before_borderInlineStyle": null,
-    "::before_borderInlineStartStyle": null,
-    "::before_borderLeftStyle": null,
-    "::before_borderInlineEndStyle": null,
-    "::before_borderRightStyle": null,
-    "::before_borderBlockStyle": null,
-    "::before_borderTopStyle": null,
-    "::before_borderBottomStyle": null,
-    "::before_borderColor": "musae-123gkgz",
-    "::before_borderInlineColor": null,
-    "::before_borderInlineStartColor": null,
-    "::before_borderLeftColor": null,
-    "::before_borderInlineEndColor": null,
-    "::before_borderRightColor": null,
-    "::before_borderBlockColor": null,
-    "::before_borderTopColor": null,
-    "::before_borderBottomColor": null,
-    $$css: true
-  }, {
-    "--1il6zln": props.borderColor != null ? props.borderColor : "initial"
-  }],
-  checked: props => [{
-    "::before_backgroundColor": "musae-rr6jkh",
-    "::before_borderColor": "musae-123gkgz",
-    "::before_borderInlineColor": null,
-    "::before_borderInlineStartColor": null,
-    "::before_borderLeftColor": null,
-    "::before_borderInlineEndColor": null,
-    "::before_borderRightColor": null,
-    "::before_borderBlockColor": null,
-    "::before_borderTopColor": null,
-    "::before_borderBottomColor": null,
-    "::after_content": "musae-1s928wv",
-    "::after_visibility": "musae-170pinb",
-    "::after_boxSizing": "musae-x38sju",
-    "::after_position": "musae-1j6awrg",
-    "::after_display": "musae-hkezso",
-    "::after_width": "musae-11yodxc",
-    "::after_height": "musae-ec44on",
-    "::after_transform": "musae-q1m6zb",
-    "::after_borderWidth": "musae-15z8w9c",
-    "::after_borderInlineWidth": null,
-    "::after_borderInlineStartWidth": null,
-    "::after_borderLeftWidth": "musae-1p9jk5k",
-    "::after_borderInlineEndWidth": null,
-    "::after_borderRightWidth": null,
-    "::after_borderBlockWidth": null,
-    "::after_borderTopWidth": "musae-1dn9wut",
-    "::after_borderBottomWidth": null,
-    "::after_borderStyle": "musae-86avzo",
-    "::after_borderInlineStyle": null,
-    "::after_borderInlineStartStyle": null,
-    "::after_borderLeftStyle": null,
-    "::after_borderInlineEndStyle": null,
-    "::after_borderRightStyle": null,
-    "::after_borderBlockStyle": null,
-    "::after_borderTopStyle": null,
-    "::after_borderBottomStyle": null,
-    "::after_borderColor": "musae-3yd8hb",
-    "::after_borderInlineColor": null,
-    "::after_borderInlineStartColor": null,
-    "::after_borderLeftColor": null,
-    "::after_borderInlineEndColor": null,
-    "::after_borderRightColor": null,
-    "::after_borderBlockColor": null,
-    "::after_borderTopColor": null,
-    "::after_borderBottomColor": null,
-    $$css: true
-  }, {
-    "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial",
-    "--1il6zln": props.backgroundColor != null ? props.backgroundColor : "initial",
-    "--joftei": props.triggerColor != null ? props.triggerColor : "initial"
-  }],
+  checkbox: {
+    default: {
+      display: "musae-3nfvp2",
+      alignItems: "musae-6s0dn4",
+      cursor: "musae-1ypdohk",
+      $$css: true
+    },
+    disabled: {
+      opacity: "musae-v8jbu9",
+      cursor: "musae-1h6gzvc",
+      $$css: true
+    }
+  },
+  trigger: {
+    default: props => [{
+      margin: "musae-ieb5ut",
+      marginInline: null,
+      marginInlineStart: null,
+      marginLeft: null,
+      marginInlineEnd: null,
+      marginRight: null,
+      marginBlock: null,
+      marginTop: null,
+      marginBottom: null,
+      visibility: "musae-lshs6z",
+      cursor: "musae-mper1u",
+      width: "musae-r8isjd",
+      height: "musae-1gfonl1",
+      position: "musae-1n2onr6",
+      "::before_content": "musae-1cpjm7i",
+      "::before_visibility": "musae-11srvyv",
+      "::before_display": "musae-1fgarty",
+      "::before_boxSizing": "musae-tql2tq",
+      "::before_width": "musae-1el3b87",
+      "::before_height": "musae-1prtdg5",
+      "::before_borderRadius": "musae-10eoie5",
+      "::before_borderStartStartRadius": null,
+      "::before_borderStartEndRadius": null,
+      "::before_borderEndStartRadius": null,
+      "::before_borderEndEndRadius": null,
+      "::before_borderTopLeftRadius": null,
+      "::before_borderTopRightRadius": null,
+      "::before_borderBottomLeftRadius": null,
+      "::before_borderBottomRightRadius": null,
+      "::before_transition": "musae-t448kv",
+      "::before_transitionBehavior": null,
+      "::before_transitionDelay": null,
+      "::before_transitionDuration": null,
+      "::before_transitionProperty": null,
+      "::before_transitionTimingFunction": null,
+      "::before_borderWidth": "musae-1lou4sy",
+      "::before_borderInlineWidth": null,
+      "::before_borderInlineStartWidth": null,
+      "::before_borderLeftWidth": null,
+      "::before_borderInlineEndWidth": null,
+      "::before_borderRightWidth": null,
+      "::before_borderBlockWidth": null,
+      "::before_borderTopWidth": null,
+      "::before_borderBottomWidth": null,
+      "::before_borderStyle": "musae-1fo1fc9",
+      "::before_borderInlineStyle": null,
+      "::before_borderInlineStartStyle": null,
+      "::before_borderLeftStyle": null,
+      "::before_borderInlineEndStyle": null,
+      "::before_borderRightStyle": null,
+      "::before_borderBlockStyle": null,
+      "::before_borderTopStyle": null,
+      "::before_borderBottomStyle": null,
+      "::before_borderColor": "musae-123gkgz",
+      "::before_borderInlineColor": null,
+      "::before_borderInlineStartColor": null,
+      "::before_borderLeftColor": null,
+      "::before_borderInlineEndColor": null,
+      "::before_borderRightColor": null,
+      "::before_borderBlockColor": null,
+      "::before_borderTopColor": null,
+      "::before_borderBottomColor": null,
+      $$css: true
+    }, {
+      "--1il6zln": props.borderColor != null ? props.borderColor : "initial"
+    }],
+    checked: props => [{
+      "::before_backgroundColor": "musae-rr6jkh",
+      "::before_borderColor": "musae-123gkgz",
+      "::before_borderInlineColor": null,
+      "::before_borderInlineStartColor": null,
+      "::before_borderLeftColor": null,
+      "::before_borderInlineEndColor": null,
+      "::before_borderRightColor": null,
+      "::before_borderBlockColor": null,
+      "::before_borderTopColor": null,
+      "::before_borderBottomColor": null,
+      "::after_content": "musae-1s928wv",
+      "::after_visibility": "musae-170pinb",
+      "::after_boxSizing": "musae-x38sju",
+      "::after_position": "musae-1j6awrg",
+      "::after_display": "musae-hkezso",
+      "::after_width": "musae-11yodxc",
+      "::after_height": "musae-ec44on",
+      "::after_transform": "musae-q1m6zb",
+      "::after_borderWidth": "musae-15z8w9c",
+      "::after_borderInlineWidth": null,
+      "::after_borderInlineStartWidth": null,
+      "::after_borderLeftWidth": "musae-1p9jk5k",
+      "::after_borderInlineEndWidth": null,
+      "::after_borderRightWidth": null,
+      "::after_borderBlockWidth": null,
+      "::after_borderTopWidth": "musae-1dn9wut",
+      "::after_borderBottomWidth": null,
+      "::after_borderStyle": "musae-86avzo",
+      "::after_borderInlineStyle": null,
+      "::after_borderInlineStartStyle": null,
+      "::after_borderLeftStyle": null,
+      "::after_borderInlineEndStyle": null,
+      "::after_borderRightStyle": null,
+      "::after_borderBlockStyle": null,
+      "::after_borderTopStyle": null,
+      "::after_borderBottomStyle": null,
+      "::after_borderColor": "musae-3yd8hb",
+      "::after_borderInlineColor": null,
+      "::after_borderInlineStartColor": null,
+      "::after_borderLeftColor": null,
+      "::after_borderInlineEndColor": null,
+      "::after_borderRightColor": null,
+      "::after_borderBlockColor": null,
+      "::after_borderTopColor": null,
+      "::after_borderBottomColor": null,
+      $$css: true
+    }, {
+      "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--1il6zln": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--joftei": props.color != null ? props.color : "initial"
+    }],
+    disabled: props => [{
+      "::before_backgroundColor": "musae-rr6jkh",
+      "::before_borderColor": "musae-123gkgz",
+      "::before_borderInlineColor": null,
+      "::before_borderInlineStartColor": null,
+      "::before_borderLeftColor": null,
+      "::before_borderInlineEndColor": null,
+      "::before_borderRightColor": null,
+      "::before_borderBlockColor": null,
+      "::before_borderTopColor": null,
+      "::before_borderBottomColor": null,
+      "::after_borderColor": "musae-3yd8hb",
+      "::after_borderInlineColor": null,
+      "::after_borderInlineStartColor": null,
+      "::after_borderLeftColor": null,
+      "::after_borderInlineEndColor": null,
+      "::after_borderRightColor": null,
+      "::after_borderBlockColor": null,
+      "::after_borderTopColor": null,
+      "::after_borderBottomColor": null,
+      $$css: true
+    }, {
+      "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--1il6zln": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--joftei": props.color != null ? props.color : "initial"
+    }],
+    unchecked: {
+      "::before_backgroundColor": null,
+      $$css: true
+    }
+  },
   label: {
-    paddingInline: "musae-sslq2m",
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    $$css: true
+    default: {
+      paddingInline: "musae-sslq2m",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      $$css: true
+    }
   }
 };
 const Checkbox = ({
@@ -143,36 +190,50 @@ const Checkbox = ({
   className,
   style,
   children,
-  ...props$1
+  onChange,
+  disabled = false,
+  checked
 }) => {
   const contextValue = useContext(Context);
   const classNames = useClassNames(ComponentToken.Checkbox);
   const theme = useTheme();
-  const [_isChecked, _setIsChecked] = useControlledState(props$1.checked, {
+  const isDisabled = useMemo(() => {
+    return contextValue?.disabled ?? disabled;
+  }, [contextValue, disabled]);
+  const [_isChecked, _setIsChecked] = useControlledState(checked, {
     defaultState: false
   });
   /// check current checkbox is checked
   /// if there is context value, use context value
   /// else use controlled state
-  const isChecked = useMemo(() => contextValue ? contextValue.value.has(value) : _isChecked, [_isChecked, contextValue, value]);
+  const isChecked = useMemo(() => {
+    if (!contextValue || !value) {
+      return _isChecked;
+    }
+    return contextValue.value.has(value);
+  }, [_isChecked, contextValue, value]);
   /// change handler
   /// if there is context value, just notify context
   /// else change the controlled state
-  const change = useCallback(event => {
-    contextValue?.change(value);
-    _setIsChecked(event.target.checked);
-  }, [_setIsChecked, contextValue, value]);
+  const change = useEvent(event => {
+    if (isDisabled) return;
+    const checked = event.target.checked;
+    !!value && contextValue?.change(value, checked);
+    _setIsChecked(checked);
+    onChange?.(event);
+  });
   const styled = {
-    checkbox: {
-      className: "musae-3nfvp2 musae-6s0dn4 musae-1ypdohk"
-    },
-    trigger: props(styles.trigger({
+    checkbox: props(styles.checkbox.default, isDisabled && styles.checkbox.disabled),
+    trigger: props(styles.trigger.default({
       borderColor: theme.colors[ColorToken.Outline]
-    }), isChecked && styles.checked({
+    }), isChecked && styles.trigger.checked({
       backgroundColor: theme.colors[ColorToken.Primary],
-      triggerColor: theme.colors[ColorToken.OnPrimary]
-    })),
-    label: props(typography.label.small, styles.label)
+      color: theme.colors[ColorToken.OnPrimary]
+    }), isDisabled && styles.trigger.disabled({
+      backgroundColor: theme.colors[ColorToken.OnSurface],
+      color: theme.colors[ColorToken.OnPrimary]
+    }), !isChecked && styles.trigger.unchecked),
+    label: props(styles.label.default, typography.label.small)
   };
   return React.createElement("label", {
     className: clsx(styled.checkbox.className, className, classNames[CheckboxClassToken.Checkbox]),
@@ -186,6 +247,7 @@ const Checkbox = ({
     style: styled.trigger.style,
     checked: isChecked,
     "aria-checked": isChecked,
+    disabled: isDisabled,
     onChange: change
   }), children && React.createElement("span", {
     className: styled.label.className,

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CheckboxGroupProps } from "./types";
-declare const Group: (props: CheckboxGroupProps) => React.JSX.Element;
+declare const Group: ({ value: controlledValue, children, onChange, disabled }: CheckboxGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/checkbox/group.js

@@ -2,32 +2,33 @@ import Context from './context.js';
 import React, { useMemo, useCallback } from 'react';
 import { useControlledState } from '@aiszlab/relax';
 
-const Group = (props) => {
-    const [_value, _setValue] = useControlledState(props.value, {
+const Group = ({ value: controlledValue, children, onChange, disabled = false }) => {
+    const [_value, setValue] = useControlledState(controlledValue, {
         defaultState: [],
     });
     const value = useMemo(() => new Set(_value), [_value]);
-    /// change handler
-    const change = useCallback((value) => {
-        _setValue((prev) => {
-            const next = new Set(prev);
-            if (next.has(value)) {
-                next.delete(value);
-            }
-            else {
-                next.add(value);
-            }
-            return Array.from(next);
-        });
-    }, [_setValue]);
-    /// context value
-    const _contextValue = useMemo(() => {
+    // change handler
+    const change = useCallback((key, isChecked) => {
+        const checkedKeys = new Set(value);
+        if (isChecked) {
+            checkedKeys.add(key);
+        }
+        else {
+            checkedKeys.delete(key);
+        }
+        const _checkedKeys = Array.from(checkedKeys);
+        onChange?.(_checkedKeys);
+        setValue(_checkedKeys);
+    }, [setValue, value]);
+    // context value
+    const contextValue = useMemo(() => {
         return {
             value,
             change,
+            disabled,
         };
-    }, [value, change]);
-    return React.createElement(Context.Provider, { value: _contextValue }, props.children);
+    }, [value, change, disabled]);
+    return React.createElement(Context.Provider, { value: contextValue }, children);
 };
 
 export { Group as default };

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

@@ -1,3 +1,3 @@
-export declare const Checkbox: (({ value, className, style, children, ...props }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
-    Group: (props: import("./types").CheckboxGroupProps) => import("react").JSX.Element;
+export declare const Checkbox: (({ value, className, style, children, onChange, disabled, checked }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
+    Group: ({ value: controlledValue, children, onChange, disabled }: import("./types").CheckboxGroupProps) => import("react").JSX.Element;
 };