musae 0.2.6 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/dist/components/avatar/avatar.js +1 -1
  2. package/dist/components/breadcrumb/breadcrumb.js +1 -1
  3. package/dist/components/breadcrumb/item.js +1 -1
  4. package/dist/components/button/button.js +13 -16
  5. package/dist/components/calendar/calendar.js +1 -1
  6. package/dist/components/calendar/hooks.js +1 -1
  7. package/dist/components/checkbox/checkbox.d.ts +1 -1
  8. package/dist/components/checkbox/checkbox.js +203 -143
  9. package/dist/components/checkbox/group.d.ts +1 -1
  10. package/dist/components/checkbox/group.js +20 -19
  11. package/dist/components/checkbox/index.d.ts +2 -2
  12. package/dist/components/checkbox/types.d.ts +22 -1
  13. package/dist/components/clock/column.js +1 -1
  14. package/dist/components/collapse/collapse.js +1 -1
  15. package/dist/components/collapse/item.js +14 -8
  16. package/dist/components/date-picker/date-picker.js +1 -1
  17. package/dist/components/dialog/dialog.js +1 -1
  18. package/dist/components/dialog/popup.js +2 -2
  19. package/dist/components/divider/divider.js +1 -1
  20. package/dist/components/drawer/drawer.js +1 -1
  21. package/dist/components/drawer/popup.js +2 -2
  22. package/dist/components/empty/empty.js +1 -1
  23. package/dist/components/floating-action-button/floatable.d.ts +4 -0
  24. package/dist/components/floating-action-button/floatable.js +83 -0
  25. package/dist/components/floating-action-button/floating-action-button.d.ts +4 -0
  26. package/dist/components/floating-action-button/floating-action-button.js +26 -0
  27. package/dist/components/floating-action-button/index.d.ts +2 -0
  28. package/dist/components/floating-action-button/types.d.ts +44 -0
  29. package/dist/components/form/field/error.d.ts +2 -2
  30. package/dist/components/form/field/error.js +36 -22
  31. package/dist/components/form/field/field.js +6 -21
  32. package/dist/components/form/field/layout.js +1 -1
  33. package/dist/components/grid/col.js +1 -1
  34. package/dist/components/grid/row.js +1 -1
  35. package/dist/components/icon/icon.d.ts +1 -1
  36. package/dist/components/icon/icon.js +5 -3
  37. package/dist/components/icon/types.d.ts +6 -1
  38. package/dist/components/image/preview/operations.js +2 -2
  39. package/dist/components/image/preview/preview.js +1 -1
  40. package/dist/components/input/input.d.ts +6 -6
  41. package/dist/components/input/input.js +9 -15
  42. package/dist/components/layout/header.js +1 -1
  43. package/dist/components/layout/layout.js +1 -1
  44. package/dist/components/loading/loading.js +1 -1
  45. package/dist/components/menu/group.js +14 -8
  46. package/dist/components/menu/hooks.js +1 -1
  47. package/dist/components/menu/item.js +1 -1
  48. package/dist/components/notification/holder.js +2 -3
  49. package/dist/components/notification/notification.js +1 -1
  50. package/dist/components/otp-input/otp-input.js +1 -1
  51. package/dist/components/pagination/hooks.d.ts +4 -2
  52. package/dist/components/pagination/hooks.js +9 -4
  53. package/dist/components/pagination/item.js +6 -8
  54. package/dist/components/pagination/pagination.d.ts +1 -1
  55. package/dist/components/pagination/pagination.js +37 -9
  56. package/dist/components/pagination/types.d.ts +6 -0
  57. package/dist/components/picker/picker.js +2 -2
  58. package/dist/components/popover/popover.js +1 -1
  59. package/dist/components/popper/dropdown.js +1 -1
  60. package/dist/components/popper/popper.js +1 -1
  61. package/dist/components/portal/portal.js +6 -2
  62. package/dist/components/portal/types.d.ts +6 -0
  63. package/dist/components/progress/circular.js +1 -1
  64. package/dist/components/progress/linear.js +1 -1
  65. package/dist/components/radio/radio.js +1 -1
  66. package/dist/components/rate/rate.js +1 -1
  67. package/dist/components/rate/star.js +1 -1
  68. package/dist/components/ripple/ripple.js +1 -1
  69. package/dist/components/select/hooks.d.ts +1 -1
  70. package/dist/components/select/select.d.ts +1 -1
  71. package/dist/components/select/select.js +5 -5
  72. package/dist/components/select/selector.d.ts +3 -6
  73. package/dist/components/select/selector.js +16 -10
  74. package/dist/components/select/types.d.ts +3 -1
  75. package/dist/components/space/space.js +1 -1
  76. package/dist/components/steps/item.d.ts +1 -1
  77. package/dist/components/steps/item.js +46 -31
  78. package/dist/components/steps/steps.d.ts +1 -1
  79. package/dist/components/steps/steps.js +6 -4
  80. package/dist/components/steps/types.d.ts +15 -0
  81. package/dist/components/switch/switch.js +1 -1
  82. package/dist/components/table/body.js +1 -1
  83. package/dist/components/table/header/cell.js +1 -1
  84. package/dist/components/table/header/header.js +1 -1
  85. package/dist/components/tabs/hooks.js +5 -5
  86. package/dist/components/tabs/navigation.js +1 -1
  87. package/dist/components/tabs/panels.js +1 -1
  88. package/dist/components/tag/tag.js +1 -1
  89. package/dist/components/theme/tokens.stylex.d.ts +1 -0
  90. package/dist/components/time-picker/panel.js +1 -1
  91. package/dist/components/time-picker/time-picker.js +1 -1
  92. package/dist/components/timeline/item.js +30 -14
  93. package/dist/components/timeline/timeline.d.ts +1 -1
  94. package/dist/components/timeline/timeline.js +5 -3
  95. package/dist/components/timeline/types.d.ts +10 -0
  96. package/dist/components/tour/tour.js +3 -2
  97. package/dist/components/transfer/context.d.ts +6 -0
  98. package/dist/components/transfer/context.js +11 -0
  99. package/dist/components/transfer/hooks.d.ts +19 -0
  100. package/dist/components/transfer/hooks.js +49 -0
  101. package/dist/components/transfer/index.d.ts +2 -0
  102. package/dist/components/transfer/item.d.ts +4 -0
  103. package/dist/components/transfer/item.js +25 -0
  104. package/dist/components/transfer/list.d.ts +4 -0
  105. package/dist/components/transfer/list.js +122 -0
  106. package/dist/components/transfer/transfer.d.ts +4 -0
  107. package/dist/components/transfer/transfer.js +82 -0
  108. package/dist/components/transfer/types.d.ts +83 -0
  109. package/dist/components/tree/list.js +14 -7
  110. package/dist/components/tree/node.js +1 -1
  111. package/dist/components/waterfall/sequential.js +1 -1
  112. package/dist/components/waterfall/waterfall.js +1 -1
  113. package/dist/hooks/use-class-names.d.ts +17 -1
  114. package/dist/hooks/use-container.d.ts +11 -0
  115. package/dist/hooks/use-container.js +23 -0
  116. package/dist/hooks/use-expandable.d.ts +11 -0
  117. package/dist/hooks/use-expandable.js +37 -0
  118. package/dist/index.d.ts +2 -0
  119. package/dist/index.js +2 -0
  120. package/dist/stylex.css +20 -15
  121. package/dist/utils/class-name.d.ts +59 -10
  122. package/dist/utils/class-name.js +40 -6
  123. package/package.json +13 -5
  124. package/dist/hooks/use-expand-effect.d.ts +0 -12
  125. package/dist/hooks/use-expand-effect.js +0 -34
  126. /package/dist/node_modules/.pnpm/{@aiszlab_relax@1.2.56_react-dom@18.3.1_react@18.3.1 → @aiszlab_relax@1.2.59_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@aiszlab/relax/dist/dom/contains.js +0 -0
  127. /package/dist/node_modules/.pnpm/{@stylexjs_stylex@0.7.4 → @stylexjs_stylex@0.7.5}/node_modules/@stylexjs/stylex/lib/es/stylex.js +0 -0
@@ -1,5 +1,5 @@
1
1
  import React, { forwardRef, useContext } from 'react';
2
- import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
2
+ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
3
3
  import { Context } from './context.js';
4
4
  import { useTheme } from '../theme/hooks.js';
5
5
  import { ColorToken } from '../../utils/colors.js';
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
2
+ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
3
3
  import { typography } from '../theme/theme.js';
4
4
  import { useTheme } from '../theme/hooks.js';
5
5
  import { ColorToken } from '../../utils/colors.js';
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
2
+ import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
3
3
  import { useTheme } from '../theme/hooks.js';
4
4
  import { ColorToken } from '../../utils/colors.js';
5
5
  import { useClassNames } from '../../hooks/use-class-names.js';
@@ -1,7 +1,7 @@
1
1
  import React, { forwardRef } from 'react';
2
2
  import { ComponentToken, ButtonClassToken } from '../../utils/class-name.js';
3
3
  import clsx from 'clsx';
4
- import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
4
+ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
5
5
  import { useTheme } from '../theme/hooks.js';
6
6
  import { useButton } from './hooks.js';
7
7
  import Ripple from '../ripple/ripple.js';
@@ -29,43 +29,40 @@ const styles = {
29
29
  $$css: true
30
30
  },
31
31
  small: {
32
- padding: "musae-aubp7",
33
- paddingInline: null,
32
+ paddingBlock: "musae-hwhe2e",
33
+ paddingTop: null,
34
+ paddingBottom: null,
35
+ paddingInline: "musae-sslq2m",
34
36
  paddingStart: null,
35
37
  paddingLeft: null,
36
38
  paddingEnd: null,
37
39
  paddingRight: null,
38
- paddingBlock: null,
39
- paddingTop: null,
40
- paddingBottom: null,
41
40
  minHeight: "musae-1sal0kv",
42
41
  minWidth: "musae-trrjuf",
43
42
  $$css: true
44
43
  },
45
44
  medium: {
46
- padding: "musae-wygk8u",
47
- paddingInline: null,
45
+ paddingBlock: "musae-mcngwa",
46
+ paddingTop: null,
47
+ paddingBottom: null,
48
+ paddingInline: "musae-12vixxq",
48
49
  paddingStart: null,
49
50
  paddingLeft: null,
50
51
  paddingEnd: null,
51
52
  paddingRight: null,
52
- paddingBlock: null,
53
- paddingTop: null,
54
- paddingBottom: null,
55
53
  minHeight: "musae-1infgec",
56
54
  minWidth: "musae-ba7gwn",
57
55
  $$css: true
58
56
  },
59
57
  large: {
60
- padding: "musae-1f5cgw",
61
- paddingInline: null,
58
+ paddingBlock: "musae-avjae4",
59
+ paddingTop: null,
60
+ paddingBottom: null,
61
+ paddingInline: "musae-1mmg125",
62
62
  paddingStart: null,
63
63
  paddingLeft: null,
64
64
  paddingEnd: null,
65
65
  paddingRight: null,
66
- paddingBlock: null,
67
- paddingTop: null,
68
- paddingBottom: null,
69
66
  minHeight: "musae-1ee7i9g",
70
67
  minWidth: "musae-1049mhy",
71
68
  $$css: true
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.js';
3
3
  import { useClassNames } from '../../hooks/use-class-names.js';
4
4
  import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
5
- import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
5
+ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
6
6
  import { typography } from '../theme/theme.js';
7
7
  import clsx from 'clsx';
8
8
  import Button from '../button/button.js';
@@ -5,7 +5,7 @@ import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
5
5
  import { toArray, useControlledState } from '@aiszlab/relax';
6
6
  import { Timespan } from '../../utils/timespan.js';
7
7
  import clsx from 'clsx';
8
- import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
8
+ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
9
9
  import { typography } from '../theme/theme.js';
10
10
  import { useTheme } from '../theme/hooks.js';
11
11
  import { ColorToken } from '../../utils/colors.js';
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { CheckboxProps } from "./types";
3
- declare const Checkbox: ({ value, className, style, children, onChange, ...props }: CheckboxProps) => React.JSX.Element;
3
+ declare const Checkbox: ({ value, className, style, children, onChange, disabled, checked }: CheckboxProps) => React.JSX.Element;
4
4
  export default Checkbox;
@@ -1,141 +1,188 @@
1
- import React, { useContext, useMemo, useCallback } from 'react';
2
- import { useControlledState } from '@aiszlab/relax';
1
+ import React, { useContext, useMemo } from 'react';
2
+ import { useControlledState, useEvent } from '@aiszlab/relax';
3
3
  import Context from './context.js';
4
4
  import { useClassNames } from '../../hooks/use-class-names.js';
5
5
  import { ComponentToken, CheckboxClassToken } from '../../utils/class-name.js';
6
6
  import clsx from 'clsx';
7
- import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
7
+ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
8
8
  import { useTheme } from '../theme/hooks.js';
9
9
  import { ColorToken } from '../../utils/colors.js';
10
10
  import { typography } from '../theme/theme.js';
11
11
 
12
12
  const styles = {
13
- trigger: props => [{
14
- margin: "musae-ieb5ut",
15
- marginInline: null,
16
- marginInlineStart: null,
17
- marginLeft: null,
18
- marginInlineEnd: null,
19
- marginRight: null,
20
- marginBlock: null,
21
- marginTop: null,
22
- marginBottom: null,
23
- visibility: "musae-lshs6z",
24
- cursor: "musae-mper1u",
25
- width: "musae-r8isjd",
26
- height: "musae-1gfonl1",
27
- position: "musae-1n2onr6",
28
- "::before_content": "musae-1cpjm7i",
29
- "::before_visibility": "musae-11srvyv",
30
- "::before_display": "musae-1fgarty",
31
- "::before_boxSizing": "musae-tql2tq",
32
- "::before_width": "musae-1el3b87",
33
- "::before_height": "musae-1prtdg5",
34
- "::before_borderRadius": "musae-10eoie5",
35
- "::before_borderStartStartRadius": null,
36
- "::before_borderStartEndRadius": null,
37
- "::before_borderEndStartRadius": null,
38
- "::before_borderEndEndRadius": null,
39
- "::before_borderTopLeftRadius": null,
40
- "::before_borderTopRightRadius": null,
41
- "::before_borderBottomLeftRadius": null,
42
- "::before_borderBottomRightRadius": null,
43
- "::before_transition": "musae-t448kv",
44
- "::before_transitionBehavior": null,
45
- "::before_transitionDelay": null,
46
- "::before_transitionDuration": null,
47
- "::before_transitionProperty": null,
48
- "::before_transitionTimingFunction": null,
49
- "::before_borderWidth": "musae-1lou4sy",
50
- "::before_borderInlineWidth": null,
51
- "::before_borderInlineStartWidth": null,
52
- "::before_borderLeftWidth": null,
53
- "::before_borderInlineEndWidth": null,
54
- "::before_borderRightWidth": null,
55
- "::before_borderBlockWidth": null,
56
- "::before_borderTopWidth": null,
57
- "::before_borderBottomWidth": null,
58
- "::before_borderStyle": "musae-1fo1fc9",
59
- "::before_borderInlineStyle": null,
60
- "::before_borderInlineStartStyle": null,
61
- "::before_borderLeftStyle": null,
62
- "::before_borderInlineEndStyle": null,
63
- "::before_borderRightStyle": null,
64
- "::before_borderBlockStyle": null,
65
- "::before_borderTopStyle": null,
66
- "::before_borderBottomStyle": null,
67
- "::before_borderColor": "musae-123gkgz",
68
- "::before_borderInlineColor": null,
69
- "::before_borderInlineStartColor": null,
70
- "::before_borderLeftColor": null,
71
- "::before_borderInlineEndColor": null,
72
- "::before_borderRightColor": null,
73
- "::before_borderBlockColor": null,
74
- "::before_borderTopColor": null,
75
- "::before_borderBottomColor": null,
76
- $$css: true
77
- }, {
78
- "--1il6zln": props.borderColor != null ? props.borderColor : "initial"
79
- }],
80
- checked: props => [{
81
- "::before_backgroundColor": "musae-rr6jkh",
82
- "::before_borderColor": "musae-123gkgz",
83
- "::before_borderInlineColor": null,
84
- "::before_borderInlineStartColor": null,
85
- "::before_borderLeftColor": null,
86
- "::before_borderInlineEndColor": null,
87
- "::before_borderRightColor": null,
88
- "::before_borderBlockColor": null,
89
- "::before_borderTopColor": null,
90
- "::before_borderBottomColor": null,
91
- "::after_content": "musae-1s928wv",
92
- "::after_visibility": "musae-170pinb",
93
- "::after_boxSizing": "musae-x38sju",
94
- "::after_position": "musae-1j6awrg",
95
- "::after_display": "musae-hkezso",
96
- "::after_width": "musae-11yodxc",
97
- "::after_height": "musae-ec44on",
98
- "::after_transform": "musae-q1m6zb",
99
- "::after_borderWidth": "musae-15z8w9c",
100
- "::after_borderInlineWidth": null,
101
- "::after_borderInlineStartWidth": null,
102
- "::after_borderLeftWidth": "musae-1p9jk5k",
103
- "::after_borderInlineEndWidth": null,
104
- "::after_borderRightWidth": null,
105
- "::after_borderBlockWidth": null,
106
- "::after_borderTopWidth": "musae-1dn9wut",
107
- "::after_borderBottomWidth": null,
108
- "::after_borderStyle": "musae-86avzo",
109
- "::after_borderInlineStyle": null,
110
- "::after_borderInlineStartStyle": null,
111
- "::after_borderLeftStyle": null,
112
- "::after_borderInlineEndStyle": null,
113
- "::after_borderRightStyle": null,
114
- "::after_borderBlockStyle": null,
115
- "::after_borderTopStyle": null,
116
- "::after_borderBottomStyle": null,
117
- "::after_borderColor": "musae-3yd8hb",
118
- "::after_borderInlineColor": null,
119
- "::after_borderInlineStartColor": null,
120
- "::after_borderLeftColor": null,
121
- "::after_borderInlineEndColor": null,
122
- "::after_borderRightColor": null,
123
- "::after_borderBlockColor": null,
124
- "::after_borderTopColor": null,
125
- "::after_borderBottomColor": null,
126
- $$css: true
127
- }, {
128
- "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial",
129
- "--1il6zln": props.backgroundColor != null ? props.backgroundColor : "initial",
130
- "--joftei": props.triggerColor != null ? props.triggerColor : "initial"
131
- }],
13
+ checkbox: {
14
+ default: {
15
+ display: "musae-3nfvp2",
16
+ alignItems: "musae-6s0dn4",
17
+ cursor: "musae-1ypdohk",
18
+ $$css: true
19
+ },
20
+ disabled: {
21
+ opacity: "musae-v8jbu9",
22
+ cursor: "musae-1h6gzvc",
23
+ $$css: true
24
+ }
25
+ },
26
+ trigger: {
27
+ default: props => [{
28
+ margin: "musae-ieb5ut",
29
+ marginInline: null,
30
+ marginInlineStart: null,
31
+ marginLeft: null,
32
+ marginInlineEnd: null,
33
+ marginRight: null,
34
+ marginBlock: null,
35
+ marginTop: null,
36
+ marginBottom: null,
37
+ visibility: "musae-lshs6z",
38
+ cursor: "musae-mper1u",
39
+ width: "musae-r8isjd",
40
+ height: "musae-1gfonl1",
41
+ position: "musae-1n2onr6",
42
+ "::before_content": "musae-1cpjm7i",
43
+ "::before_visibility": "musae-11srvyv",
44
+ "::before_display": "musae-1fgarty",
45
+ "::before_boxSizing": "musae-tql2tq",
46
+ "::before_width": "musae-1el3b87",
47
+ "::before_height": "musae-1prtdg5",
48
+ "::before_borderRadius": "musae-10eoie5",
49
+ "::before_borderStartStartRadius": null,
50
+ "::before_borderStartEndRadius": null,
51
+ "::before_borderEndStartRadius": null,
52
+ "::before_borderEndEndRadius": null,
53
+ "::before_borderTopLeftRadius": null,
54
+ "::before_borderTopRightRadius": null,
55
+ "::before_borderBottomLeftRadius": null,
56
+ "::before_borderBottomRightRadius": null,
57
+ "::before_transition": "musae-t448kv",
58
+ "::before_transitionBehavior": null,
59
+ "::before_transitionDelay": null,
60
+ "::before_transitionDuration": null,
61
+ "::before_transitionProperty": null,
62
+ "::before_transitionTimingFunction": null,
63
+ "::before_borderWidth": "musae-1lou4sy",
64
+ "::before_borderInlineWidth": null,
65
+ "::before_borderInlineStartWidth": null,
66
+ "::before_borderLeftWidth": null,
67
+ "::before_borderInlineEndWidth": null,
68
+ "::before_borderRightWidth": null,
69
+ "::before_borderBlockWidth": null,
70
+ "::before_borderTopWidth": null,
71
+ "::before_borderBottomWidth": null,
72
+ "::before_borderStyle": "musae-1fo1fc9",
73
+ "::before_borderInlineStyle": null,
74
+ "::before_borderInlineStartStyle": null,
75
+ "::before_borderLeftStyle": null,
76
+ "::before_borderInlineEndStyle": null,
77
+ "::before_borderRightStyle": null,
78
+ "::before_borderBlockStyle": null,
79
+ "::before_borderTopStyle": null,
80
+ "::before_borderBottomStyle": null,
81
+ "::before_borderColor": "musae-123gkgz",
82
+ "::before_borderInlineColor": null,
83
+ "::before_borderInlineStartColor": null,
84
+ "::before_borderLeftColor": null,
85
+ "::before_borderInlineEndColor": null,
86
+ "::before_borderRightColor": null,
87
+ "::before_borderBlockColor": null,
88
+ "::before_borderTopColor": null,
89
+ "::before_borderBottomColor": null,
90
+ $$css: true
91
+ }, {
92
+ "--1il6zln": props.borderColor != null ? props.borderColor : "initial"
93
+ }],
94
+ checked: props => [{
95
+ "::before_backgroundColor": "musae-rr6jkh",
96
+ "::before_borderColor": "musae-123gkgz",
97
+ "::before_borderInlineColor": null,
98
+ "::before_borderInlineStartColor": null,
99
+ "::before_borderLeftColor": null,
100
+ "::before_borderInlineEndColor": null,
101
+ "::before_borderRightColor": null,
102
+ "::before_borderBlockColor": null,
103
+ "::before_borderTopColor": null,
104
+ "::before_borderBottomColor": null,
105
+ "::after_content": "musae-1s928wv",
106
+ "::after_visibility": "musae-170pinb",
107
+ "::after_boxSizing": "musae-x38sju",
108
+ "::after_position": "musae-1j6awrg",
109
+ "::after_display": "musae-hkezso",
110
+ "::after_width": "musae-11yodxc",
111
+ "::after_height": "musae-ec44on",
112
+ "::after_transform": "musae-q1m6zb",
113
+ "::after_borderWidth": "musae-15z8w9c",
114
+ "::after_borderInlineWidth": null,
115
+ "::after_borderInlineStartWidth": null,
116
+ "::after_borderLeftWidth": "musae-1p9jk5k",
117
+ "::after_borderInlineEndWidth": null,
118
+ "::after_borderRightWidth": null,
119
+ "::after_borderBlockWidth": null,
120
+ "::after_borderTopWidth": "musae-1dn9wut",
121
+ "::after_borderBottomWidth": null,
122
+ "::after_borderStyle": "musae-86avzo",
123
+ "::after_borderInlineStyle": null,
124
+ "::after_borderInlineStartStyle": null,
125
+ "::after_borderLeftStyle": null,
126
+ "::after_borderInlineEndStyle": null,
127
+ "::after_borderRightStyle": null,
128
+ "::after_borderBlockStyle": null,
129
+ "::after_borderTopStyle": null,
130
+ "::after_borderBottomStyle": null,
131
+ "::after_borderColor": "musae-3yd8hb",
132
+ "::after_borderInlineColor": null,
133
+ "::after_borderInlineStartColor": null,
134
+ "::after_borderLeftColor": null,
135
+ "::after_borderInlineEndColor": null,
136
+ "::after_borderRightColor": null,
137
+ "::after_borderBlockColor": null,
138
+ "::after_borderTopColor": null,
139
+ "::after_borderBottomColor": null,
140
+ $$css: true
141
+ }, {
142
+ "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial",
143
+ "--1il6zln": props.backgroundColor != null ? props.backgroundColor : "initial",
144
+ "--joftei": props.color != null ? props.color : "initial"
145
+ }],
146
+ disabled: props => [{
147
+ "::before_backgroundColor": "musae-rr6jkh",
148
+ "::before_borderColor": "musae-123gkgz",
149
+ "::before_borderInlineColor": null,
150
+ "::before_borderInlineStartColor": null,
151
+ "::before_borderLeftColor": null,
152
+ "::before_borderInlineEndColor": null,
153
+ "::before_borderRightColor": null,
154
+ "::before_borderBlockColor": null,
155
+ "::before_borderTopColor": null,
156
+ "::before_borderBottomColor": null,
157
+ "::after_borderColor": "musae-3yd8hb",
158
+ "::after_borderInlineColor": null,
159
+ "::after_borderInlineStartColor": null,
160
+ "::after_borderLeftColor": null,
161
+ "::after_borderInlineEndColor": null,
162
+ "::after_borderRightColor": null,
163
+ "::after_borderBlockColor": null,
164
+ "::after_borderTopColor": null,
165
+ "::after_borderBottomColor": null,
166
+ $$css: true
167
+ }, {
168
+ "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial",
169
+ "--1il6zln": props.backgroundColor != null ? props.backgroundColor : "initial",
170
+ "--joftei": props.color != null ? props.color : "initial"
171
+ }],
172
+ unchecked: {
173
+ "::before_backgroundColor": null,
174
+ $$css: true
175
+ }
176
+ },
132
177
  label: {
133
- paddingInline: "musae-sslq2m",
134
- paddingStart: null,
135
- paddingLeft: null,
136
- paddingEnd: null,
137
- paddingRight: null,
138
- $$css: true
178
+ default: {
179
+ paddingInline: "musae-sslq2m",
180
+ paddingStart: null,
181
+ paddingLeft: null,
182
+ paddingEnd: null,
183
+ paddingRight: null,
184
+ $$css: true
185
+ }
139
186
  }
140
187
  };
141
188
  const Checkbox = ({
@@ -144,37 +191,49 @@ const Checkbox = ({
144
191
  style,
145
192
  children,
146
193
  onChange,
147
- ...props$1
194
+ disabled = false,
195
+ checked
148
196
  }) => {
149
197
  const contextValue = useContext(Context);
150
198
  const classNames = useClassNames(ComponentToken.Checkbox);
151
199
  const theme = useTheme();
152
- const [_isChecked, _setIsChecked] = useControlledState(props$1.checked, {
200
+ const isDisabled = useMemo(() => {
201
+ return contextValue?.disabled ?? disabled;
202
+ }, [contextValue, disabled]);
203
+ const [_isChecked, _setIsChecked] = useControlledState(checked, {
153
204
  defaultState: false
154
205
  });
155
206
  /// check current checkbox is checked
156
207
  /// if there is context value, use context value
157
208
  /// else use controlled state
158
- const isChecked = useMemo(() => contextValue && !!value ? contextValue.value.has(value) : _isChecked, [_isChecked, contextValue, value]);
209
+ const isChecked = useMemo(() => {
210
+ if (!contextValue || !value) {
211
+ return _isChecked;
212
+ }
213
+ return contextValue.value.has(value);
214
+ }, [_isChecked, contextValue, value]);
159
215
  /// change handler
160
216
  /// if there is context value, just notify context
161
217
  /// else change the controlled state
162
- const change = useCallback(event => {
163
- !!value && contextValue?.change(value);
164
- _setIsChecked(event.target.checked);
218
+ const change = useEvent(event => {
219
+ if (isDisabled) return;
220
+ const checked = event.target.checked;
221
+ !!value && contextValue?.change(value, checked);
222
+ _setIsChecked(checked);
165
223
  onChange?.(event);
166
- }, [_setIsChecked, contextValue, value, onChange]);
224
+ });
167
225
  const styled = {
168
- checkbox: {
169
- className: "musae-3nfvp2 musae-6s0dn4 musae-1ypdohk"
170
- },
171
- trigger: props(styles.trigger({
226
+ checkbox: props(styles.checkbox.default, isDisabled && styles.checkbox.disabled),
227
+ trigger: props(styles.trigger.default({
172
228
  borderColor: theme.colors[ColorToken.Outline]
173
- }), isChecked && styles.checked({
229
+ }), isChecked && styles.trigger.checked({
174
230
  backgroundColor: theme.colors[ColorToken.Primary],
175
- triggerColor: theme.colors[ColorToken.OnPrimary]
176
- })),
177
- label: props(typography.label.small, styles.label)
231
+ color: theme.colors[ColorToken.OnPrimary]
232
+ }), isDisabled && styles.trigger.disabled({
233
+ backgroundColor: theme.colors[ColorToken.OnSurface],
234
+ color: theme.colors[ColorToken.OnPrimary]
235
+ }), !isChecked && styles.trigger.unchecked),
236
+ label: props(styles.label.default, typography.label.small)
178
237
  };
179
238
  return React.createElement("label", {
180
239
  className: clsx(styled.checkbox.className, className, classNames[CheckboxClassToken.Checkbox]),
@@ -188,6 +247,7 @@ const Checkbox = ({
188
247
  style: styled.trigger.style,
189
248
  checked: isChecked,
190
249
  "aria-checked": isChecked,
250
+ disabled: isDisabled,
191
251
  onChange: change
192
252
  }), children && React.createElement("span", {
193
253
  className: styled.label.className,
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { CheckboxGroupProps } from "./types";
3
- declare const Group: (props: CheckboxGroupProps) => React.JSX.Element;
3
+ declare const Group: ({ value: controlledValue, children, onChange, disabled }: CheckboxGroupProps) => React.JSX.Element;
4
4
  export default Group;
@@ -2,32 +2,33 @@ import Context from './context.js';
2
2
  import React, { useMemo, useCallback } from 'react';
3
3
  import { useControlledState } from '@aiszlab/relax';
4
4
 
5
- const Group = (props) => {
6
- const [_value, _setValue] = useControlledState(props.value, {
5
+ const Group = ({ value: controlledValue, children, onChange, disabled = false }) => {
6
+ const [_value, setValue] = useControlledState(controlledValue, {
7
7
  defaultState: [],
8
8
  });
9
9
  const value = useMemo(() => new Set(_value), [_value]);
10
- /// change handler
11
- const change = useCallback((value) => {
12
- _setValue((prev) => {
13
- const next = new Set(prev);
14
- if (next.has(value)) {
15
- next.delete(value);
16
- }
17
- else {
18
- next.add(value);
19
- }
20
- return Array.from(next);
21
- });
22
- }, [_setValue]);
23
- /// context value
24
- const _contextValue = useMemo(() => {
10
+ // change handler
11
+ const change = useCallback((key, isChecked) => {
12
+ const checkedKeys = new Set(value);
13
+ if (isChecked) {
14
+ checkedKeys.add(key);
15
+ }
16
+ else {
17
+ checkedKeys.delete(key);
18
+ }
19
+ const _checkedKeys = Array.from(checkedKeys);
20
+ onChange?.(_checkedKeys);
21
+ setValue(_checkedKeys);
22
+ }, [setValue, value]);
23
+ // context value
24
+ const contextValue = useMemo(() => {
25
25
  return {
26
26
  value,
27
27
  change,
28
+ disabled,
28
29
  };
29
- }, [value, change]);
30
- return React.createElement(Context.Provider, { value: _contextValue }, props.children);
30
+ }, [value, change, disabled]);
31
+ return React.createElement(Context.Provider, { value: contextValue }, children);
31
32
  };
32
33
 
33
34
  export { Group as default };
@@ -1,3 +1,3 @@
1
- export declare const Checkbox: (({ value, className, style, children, onChange, ...props }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
2
- Group: (props: import("./types").CheckboxGroupProps) => import("react").JSX.Element;
1
+ export declare const Checkbox: (({ value, className, style, children, onChange, disabled, checked }: import("./types").CheckboxProps) => import("react").JSX.Element) & {
2
+ Group: ({ value: controlledValue, children, onChange, disabled }: import("./types").CheckboxGroupProps) => import("react").JSX.Element;
3
3
  };
@@ -16,7 +16,12 @@ export interface ContextValue {
16
16
  * @description
17
17
  * change handler
18
18
  */
19
- change: (value: Key) => void;
19
+ change: (value: Key, isChecked: boolean) => void;
20
+ /**
21
+ * @description
22
+ * disabled
23
+ */
24
+ disabled: boolean;
20
25
  }
21
26
  /**
22
27
  * @author murukal
@@ -41,6 +46,17 @@ export interface CheckboxGroupProps {
41
46
  * @requires
42
47
  */
43
48
  children: ReactNode;
49
+ /**
50
+ * @description
51
+ * change handler
52
+ */
53
+ onChange?: (value: Key[]) => void;
54
+ /**
55
+ * @description
56
+ * disabled
57
+ * @default false
58
+ */
59
+ disabled?: boolean;
44
60
  }
45
61
  /**
46
62
  * @author murukal
@@ -73,6 +89,11 @@ export interface CheckboxProps extends ComponentProps {
73
89
  * @default void 0
74
90
  */
75
91
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
92
+ /**
93
+ * @description
94
+ * disabled
95
+ */
96
+ disabled?: boolean;
76
97
  }
77
98
  /**
78
99
  * @author murukal
@@ -4,7 +4,7 @@ import Menu from '../menu/menu.js';
4
4
  import { useClassNames } from '../../hooks/use-class-names.js';
5
5
  import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
6
6
  import { isVoid } from '@aiszlab/relax';
7
- import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
7
+ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
8
8
  import { useTheme } from '../theme/hooks.js';
9
9
  import { ColorToken } from '../../utils/colors.js';
10
10
  import clsx from 'clsx';