musae 1.0.27-beta.2 → 1.0.27-beta.21

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 (77) hide show
  1. package/dist/components/calendar/calendar.cjs +2 -2
  2. package/dist/components/calendar/calendar.mjs +2 -2
  3. package/dist/components/calendar/hooks.cjs +17 -17
  4. package/dist/components/calendar/hooks.d.ts +2 -2
  5. package/dist/components/calendar/hooks.mjs +17 -17
  6. package/dist/components/checkbox/checkbox.cjs +5 -26
  7. package/dist/components/checkbox/checkbox.mjs +3 -24
  8. package/dist/components/icon/icons/action/calendar-today.cjs +22 -0
  9. package/dist/components/icon/icons/action/calendar-today.d.ts +3 -0
  10. package/dist/components/icon/icons/action/calendar-today.mjs +18 -0
  11. package/dist/components/icon/icons/action/index.cjs +2 -0
  12. package/dist/components/icon/icons/action/index.d.ts +2 -1
  13. package/dist/components/icon/icons/action/index.mjs +1 -0
  14. package/dist/components/icon/icons/communication/index.d.ts +2 -0
  15. package/dist/components/icon/icons/communication/location-on.cjs +25 -0
  16. package/dist/components/icon/icons/communication/location-on.d.ts +3 -0
  17. package/dist/components/icon/icons/communication/location-on.mjs +21 -0
  18. package/dist/components/icon/icons/content/add.cjs +22 -0
  19. package/dist/components/icon/icons/content/add.d.ts +3 -0
  20. package/dist/components/icon/icons/content/add.mjs +18 -0
  21. package/dist/components/icon/icons/content/clear.cjs +2 -2
  22. package/dist/components/icon/icons/content/clear.d.ts +2 -2
  23. package/dist/components/icon/icons/content/clear.mjs +2 -2
  24. package/dist/components/icon/icons/content/index.cjs +4 -0
  25. package/dist/components/icon/icons/content/index.d.ts +3 -1
  26. package/dist/components/icon/icons/content/index.mjs +2 -0
  27. package/dist/components/icon/icons/content/remove.cjs +22 -0
  28. package/dist/components/icon/icons/content/remove.d.ts +3 -0
  29. package/dist/components/icon/icons/content/remove.mjs +18 -0
  30. package/dist/components/icon/icons/index.cjs +10 -0
  31. package/dist/components/icon/icons/index.d.ts +2 -0
  32. package/dist/components/icon/icons/index.mjs +5 -0
  33. package/dist/components/icon/icons/social/index.d.ts +2 -0
  34. package/dist/components/icon/icons/social/share.cjs +22 -0
  35. package/dist/components/icon/icons/social/share.d.ts +3 -0
  36. package/dist/components/icon/icons/social/share.mjs +18 -0
  37. package/dist/components/progress/linear.cjs +2 -2
  38. package/dist/components/progress/linear.mjs +2 -2
  39. package/dist/components/rich-text-editor/plugins/controlled-state/index.cjs +12 -26
  40. package/dist/components/rich-text-editor/plugins/controlled-state/index.mjs +13 -27
  41. package/dist/components/rich-text-editor/rich-text-editor.cjs +3 -11
  42. package/dist/components/rich-text-editor/rich-text-editor.mjs +3 -11
  43. package/dist/components/tabs/context.cjs +1 -4
  44. package/dist/components/tabs/context.d.ts +2 -2
  45. package/dist/components/tabs/context.mjs +1 -4
  46. package/dist/components/tabs/hooks/use-navigation.cjs +87 -0
  47. package/dist/components/tabs/hooks/use-navigation.d.ts +12 -0
  48. package/dist/components/tabs/hooks/use-navigation.mjs +85 -0
  49. package/dist/components/tabs/hooks/use-tabs-context.cjs +18 -0
  50. package/dist/components/tabs/hooks/use-tabs-context.d.ts +7 -0
  51. package/dist/components/tabs/hooks/use-tabs-context.mjs +16 -0
  52. package/dist/components/tabs/hooks/use-tabs.cjs +46 -0
  53. package/dist/components/tabs/hooks/use-tabs.d.ts +17 -0
  54. package/dist/components/tabs/hooks/use-tabs.mjs +44 -0
  55. package/dist/components/tabs/navigation.cjs +48 -18
  56. package/dist/components/tabs/navigation.mjs +47 -17
  57. package/dist/components/tabs/panels.cjs +56 -39
  58. package/dist/components/tabs/panels.mjs +56 -39
  59. package/dist/components/tabs/tab.cjs +6 -4
  60. package/dist/components/tabs/tab.mjs +5 -3
  61. package/dist/components/tabs/tabs.cjs +11 -6
  62. package/dist/components/tabs/tabs.d.ts +1 -1
  63. package/dist/components/tabs/tabs.mjs +10 -5
  64. package/dist/components/tag/tag.cjs +51 -28
  65. package/dist/components/tag/tag.d.ts +1 -1
  66. package/dist/components/tag/tag.mjs +51 -28
  67. package/dist/components/theme/tokens.stylex.d.ts +2 -0
  68. package/dist/hooks/use-theme-color-vars.cjs +7 -9
  69. package/dist/hooks/use-theme-color-vars.d.ts +2 -1
  70. package/dist/hooks/use-theme-color-vars.mjs +6 -8
  71. package/dist/styles.css +37 -21
  72. package/dist/types/tabs.d.ts +18 -2
  73. package/dist/types/tag.d.ts +7 -0
  74. package/package.json +6 -6
  75. package/dist/components/tabs/hooks.cjs +0 -145
  76. package/dist/components/tabs/hooks.d.ts +0 -43
  77. package/dist/components/tabs/hooks.mjs +0 -140
@@ -58,7 +58,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
58
58
  var dateCells = hooks.useDateCells({
59
59
  timespan: timespan,
60
60
  focusedAt: focusedAt,
61
- click: onClick,
61
+ onClick: onClick,
62
62
  classNames: classNames
63
63
  });
64
64
  var headCells = hooks.useHeadCells({
@@ -72,7 +72,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
72
72
  header: stylex.props(theme.$label.large, styles.header),
73
73
  heading: stylex.props(styles.heading, theme.$body.medium),
74
74
  body: {
75
- className: "musaex-1mwwwfo"
75
+ className: "musaex-1vathgz musaex-4jqler"
76
76
  }
77
77
  };
78
78
  React.useImperativeHandle(ref, function () {
@@ -54,7 +54,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (_ref, ref) {
54
54
  var dateCells = useDateCells({
55
55
  timespan: timespan,
56
56
  focusedAt: focusedAt,
57
- click: onClick,
57
+ onClick: onClick,
58
58
  classNames: classNames
59
59
  });
60
60
  var headCells = useHeadCells({
@@ -68,7 +68,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (_ref, ref) {
68
68
  header: props($label.large, styles.header),
69
69
  heading: props(styles.heading, $body.medium),
70
70
  body: {
71
- className: "musaex-1mwwwfo"
71
+ className: "musaex-1vathgz musaex-4jqler"
72
72
  }
73
73
  };
74
74
  useImperativeHandle(ref, function () {
@@ -30,7 +30,6 @@ var styles = {
30
30
  kgeoSG: "musaex-10tli2e",
31
31
  kEoFBp: "musaex-1hmns74",
32
32
  kLkRvE: "musaex-14lex9m",
33
- kxmVGU: "musaex-rt65ts",
34
33
  kgzTxl: "musaex-4dflte",
35
34
  $$css: true
36
35
  },
@@ -39,17 +38,17 @@ var styles = {
39
38
  $$css: true
40
39
  },
41
40
  range: {
42
- kSJ0CW: "musaex-1682cnc",
43
- koaPKo: "musaex-typ5od",
41
+ kSJ0CW: "musaex-1d34y9o",
42
+ koaPKo: "musaex-vgnsxj",
44
43
  $$css: true
45
44
  },
46
45
  from: {
47
46
  kSJ0CW: "musaex-fbisj7",
48
- koaPKo: "musaex-typ5od",
47
+ koaPKo: "musaex-vgnsxj",
49
48
  $$css: true
50
49
  },
51
50
  to: {
52
- kSJ0CW: "musaex-1682cnc",
51
+ kSJ0CW: "musaex-1d34y9o",
53
52
  koaPKo: "musaex-1gkks1t",
54
53
  $$css: true
55
54
  }
@@ -80,7 +79,7 @@ var useHeadCells = function useHeadCells(_ref) {
80
79
  var useDateCells = function useDateCells(_ref2) {
81
80
  var timespan = _ref2.timespan,
82
81
  focusedAt = _ref2.focusedAt,
83
- click = _ref2.click,
82
+ _onClick = _ref2.onClick,
84
83
  classNames = _ref2.classNames;
85
84
  var _themeColorVars = useThemeColorVars.useThemeColorVars(["secondary-container"]);
86
85
  return React.useMemo(function () {
@@ -90,6 +89,7 @@ var useDateCells = function useDateCells(_ref2) {
90
89
  var to = end.endOf("week");
91
90
  var gap = to.diff(from, "d") + 1;
92
91
  var dateCells = Array.from(new Array(gap).keys()).reduce(function (prev, _, index) {
92
+ var _prev$at;
93
93
  if (prev.at(prev.length - 1).length === 7) prev.push([]);
94
94
  var currentAt = from.add(index, "d");
95
95
  var formatted = currentAt.format("YYYY-MM-DD");
@@ -101,13 +101,13 @@ var useDateCells = function useDateCells(_ref2) {
101
101
  var styled = {
102
102
  cell: stylex.props(styles.cell, styles.date, isDisabled && styles.hidden, isBetween && styles.range, isFrom && timespan.isRange && styles.from, isTo && timespan.isRange && styles.to, theme.$body.large),
103
103
  trigger: {
104
- className: "musaex-zzs3sa musaex-1nnj97i"
104
+ className: "musaex-zzs3sa"
105
105
  }
106
106
  };
107
- prev.at(prev.length - 1).push(/*#__PURE__*/React.createElement("td", {
107
+ (_prev$at = prev.at(prev.length - 1)) === null || _prev$at === void 0 || _prev$at.push(/*#__PURE__*/React.createElement("td", {
108
108
  title: formatted,
109
109
  key: formatted,
110
- className: className.stringify(classNames.dateCell, _objectSpread(_defineProperty({}, classNames.dateCellSelected, isSelected), timespan.isRange && _defineProperty(_defineProperty(_defineProperty({}, classNames.dateCellInRange, isBetween), classNames.dateCellRangeFrom, isFrom), classNames.dateCellRangeTo, isTo)), styled.cell.className),
110
+ className: className.stringify(classNames.dateCell, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classNames.dateCellSelected, isSelected), classNames.dateCellInRange, !!timespan.isRange && isBetween), classNames.dateCellRangeFrom, !!timespan.isRange && isFrom), classNames.dateCellRangeTo, !!timespan.isRange && isTo), styled.cell.className),
111
111
  style: _objectSpread(_objectSpread({}, styled.cell.style), _themeColorVars),
112
112
  "aria-selected": isSelected,
113
113
  "aria-hidden": isDisabled
@@ -118,7 +118,7 @@ var useDateCells = function useDateCells(_ref2) {
118
118
  className: className.stringify(classNames.date, styled.trigger.className),
119
119
  style: styled.trigger.style,
120
120
  onClick: function onClick() {
121
- click(currentAt);
121
+ _onClick(currentAt);
122
122
  }
123
123
  }, currentAt.date())));
124
124
  return prev;
@@ -128,15 +128,15 @@ var useDateCells = function useDateCells(_ref2) {
128
128
  key: index
129
129
  }, cells);
130
130
  });
131
- }, [focusedAt, timespan, classNames, click, _themeColorVars]);
131
+ }, [focusedAt, timespan, classNames, _onClick, _themeColorVars]);
132
132
  };
133
133
  /**
134
134
  * @description
135
135
  * time span
136
136
  */
137
- var useValue = function useValue(_ref4) {
138
- var _click = _ref4.onClick,
139
- value = _ref4.value;
137
+ var useValue = function useValue(_ref3) {
138
+ var _click = _ref3.onClick,
139
+ value = _ref3.value;
140
140
  // change handler
141
141
  var onClick = React.useCallback(function (_value) {
142
142
  _click === null || _click === void 0 || _click(_value);
@@ -161,9 +161,9 @@ var useValue = function useValue(_ref4) {
161
161
  * @description
162
162
  * point at
163
163
  */
164
- var useFocusedAt = function useFocusedAt(_ref5) {
165
- var _ref5$focusedAt = _ref5.focusedAt,
166
- _focusedAt = _ref5$focusedAt === void 0 ? dayjs() : _ref5$focusedAt;
164
+ var useFocusedAt = function useFocusedAt(_ref4) {
165
+ var _ref4$focusedAt = _ref4.focusedAt,
166
+ _focusedAt = _ref4$focusedAt === void 0 ? dayjs() : _ref4$focusedAt;
167
167
  var _useState = React.useState(_focusedAt),
168
168
  _useState2 = _slicedToArray(_useState, 2),
169
169
  focusedAt = _useState2[0],
@@ -15,10 +15,10 @@ export declare const useHeadCells: ({ classNames }: {
15
15
  * @description
16
16
  * dates
17
17
  */
18
- export declare const useDateCells: ({ timespan, focusedAt, click, classNames, }: {
18
+ export declare const useDateCells: ({ timespan, focusedAt, onClick, classNames, }: {
19
19
  timespan: Timespan;
20
20
  focusedAt: Dayjs;
21
- click: Required<CalendarProps>["onClick"];
21
+ onClick: Required<CalendarProps>["onClick"];
22
22
  classNames: typeof CLASS_NAMES;
23
23
  }) => React.JSX.Element[];
24
24
  /**
@@ -28,7 +28,6 @@ var styles = {
28
28
  kgeoSG: "musaex-10tli2e",
29
29
  kEoFBp: "musaex-1hmns74",
30
30
  kLkRvE: "musaex-14lex9m",
31
- kxmVGU: "musaex-rt65ts",
32
31
  kgzTxl: "musaex-4dflte",
33
32
  $$css: true
34
33
  },
@@ -37,17 +36,17 @@ var styles = {
37
36
  $$css: true
38
37
  },
39
38
  range: {
40
- kSJ0CW: "musaex-1682cnc",
41
- koaPKo: "musaex-typ5od",
39
+ kSJ0CW: "musaex-1d34y9o",
40
+ koaPKo: "musaex-vgnsxj",
42
41
  $$css: true
43
42
  },
44
43
  from: {
45
44
  kSJ0CW: "musaex-fbisj7",
46
- koaPKo: "musaex-typ5od",
45
+ koaPKo: "musaex-vgnsxj",
47
46
  $$css: true
48
47
  },
49
48
  to: {
50
- kSJ0CW: "musaex-1682cnc",
49
+ kSJ0CW: "musaex-1d34y9o",
51
50
  koaPKo: "musaex-1gkks1t",
52
51
  $$css: true
53
52
  }
@@ -78,7 +77,7 @@ var useHeadCells = function useHeadCells(_ref) {
78
77
  var useDateCells = function useDateCells(_ref2) {
79
78
  var timespan = _ref2.timespan,
80
79
  focusedAt = _ref2.focusedAt,
81
- click = _ref2.click,
80
+ _onClick = _ref2.onClick,
82
81
  classNames = _ref2.classNames;
83
82
  var _themeColorVars = useThemeColorVars(["secondary-container"]);
84
83
  return useMemo(function () {
@@ -88,6 +87,7 @@ var useDateCells = function useDateCells(_ref2) {
88
87
  var to = end.endOf("week");
89
88
  var gap = to.diff(from, "d") + 1;
90
89
  var dateCells = Array.from(new Array(gap).keys()).reduce(function (prev, _, index) {
90
+ var _prev$at;
91
91
  if (prev.at(prev.length - 1).length === 7) prev.push([]);
92
92
  var currentAt = from.add(index, "d");
93
93
  var formatted = currentAt.format("YYYY-MM-DD");
@@ -99,13 +99,13 @@ var useDateCells = function useDateCells(_ref2) {
99
99
  var styled = {
100
100
  cell: props(styles.cell, styles.date, isDisabled && styles.hidden, isBetween && styles.range, isFrom && timespan.isRange && styles.from, isTo && timespan.isRange && styles.to, $body.large),
101
101
  trigger: {
102
- className: "musaex-zzs3sa musaex-1nnj97i"
102
+ className: "musaex-zzs3sa"
103
103
  }
104
104
  };
105
- prev.at(prev.length - 1).push(/*#__PURE__*/React.createElement("td", {
105
+ (_prev$at = prev.at(prev.length - 1)) === null || _prev$at === void 0 || _prev$at.push(/*#__PURE__*/React.createElement("td", {
106
106
  title: formatted,
107
107
  key: formatted,
108
- className: stringify(classNames.dateCell, _objectSpread(_defineProperty({}, classNames.dateCellSelected, isSelected), timespan.isRange && _defineProperty(_defineProperty(_defineProperty({}, classNames.dateCellInRange, isBetween), classNames.dateCellRangeFrom, isFrom), classNames.dateCellRangeTo, isTo)), styled.cell.className),
108
+ className: stringify(classNames.dateCell, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classNames.dateCellSelected, isSelected), classNames.dateCellInRange, !!timespan.isRange && isBetween), classNames.dateCellRangeFrom, !!timespan.isRange && isFrom), classNames.dateCellRangeTo, !!timespan.isRange && isTo), styled.cell.className),
109
109
  style: _objectSpread(_objectSpread({}, styled.cell.style), _themeColorVars),
110
110
  "aria-selected": isSelected,
111
111
  "aria-hidden": isDisabled
@@ -116,7 +116,7 @@ var useDateCells = function useDateCells(_ref2) {
116
116
  className: stringify(classNames.date, styled.trigger.className),
117
117
  style: styled.trigger.style,
118
118
  onClick: function onClick() {
119
- click(currentAt);
119
+ _onClick(currentAt);
120
120
  }
121
121
  }, currentAt.date())));
122
122
  return prev;
@@ -126,15 +126,15 @@ var useDateCells = function useDateCells(_ref2) {
126
126
  key: index
127
127
  }, cells);
128
128
  });
129
- }, [focusedAt, timespan, classNames, click, _themeColorVars]);
129
+ }, [focusedAt, timespan, classNames, _onClick, _themeColorVars]);
130
130
  };
131
131
  /**
132
132
  * @description
133
133
  * time span
134
134
  */
135
- var useValue = function useValue(_ref4) {
136
- var _click = _ref4.onClick,
137
- value = _ref4.value;
135
+ var useValue = function useValue(_ref3) {
136
+ var _click = _ref3.onClick,
137
+ value = _ref3.value;
138
138
  // change handler
139
139
  var onClick = useCallback(function (_value) {
140
140
  _click === null || _click === void 0 || _click(_value);
@@ -159,9 +159,9 @@ var useValue = function useValue(_ref4) {
159
159
  * @description
160
160
  * point at
161
161
  */
162
- var useFocusedAt = function useFocusedAt(_ref5) {
163
- var _ref5$focusedAt = _ref5.focusedAt,
164
- _focusedAt = _ref5$focusedAt === void 0 ? dayjs() : _ref5$focusedAt;
162
+ var useFocusedAt = function useFocusedAt(_ref4) {
163
+ var _ref4$focusedAt = _ref4.focusedAt,
164
+ _focusedAt = _ref4$focusedAt === void 0 ? dayjs() : _ref4$focusedAt;
165
165
  var _useState = useState(_focusedAt),
166
166
  _useState2 = _slicedToArray(_useState, 2),
167
167
  focusedAt = _useState2[0],
@@ -8,18 +8,17 @@ var React = require('react');
8
8
  var relax = require('@aiszlab/relax');
9
9
  var context = require('./context.cjs');
10
10
  var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.17.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
11
- var hooks = require('../theme/hooks.cjs');
12
11
  var styles = require('./styles.cjs');
13
12
  var useClassNames = require('../../hooks/use-class-names.cjs');
14
13
  var className = require('@aiszlab/relax/class-name');
15
14
  var check = require('./check.cjs');
16
15
  var Indeterminate = require('./Indeterminate.cjs');
17
16
  var ripple = require('../ripple/ripple.cjs');
18
- var hooks$1 = require('../ripple/hooks.cjs');
19
- var color = require('@aiszlab/fuzzy/color');
17
+ var hooks = require('../ripple/hooks.cjs');
20
18
  var tokens_stylex = require('../theme/tokens.stylex.cjs');
21
19
  var dom = require('@aiszlab/relax/dom');
22
20
  var theme = require('../theme/theme.cjs');
21
+ var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
23
22
 
24
23
  var Checkbox = function Checkbox(_ref) {
25
24
  var _contextValue$isDisab;
@@ -41,9 +40,9 @@ var Checkbox = function Checkbox(_ref) {
41
40
  defaultChecked = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked;
42
41
  var contextValue = React.useContext(context.default);
43
42
  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
44
- var theme$1 = hooks.useTheme();
45
43
  var isDisabled = (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : disabled;
46
- var _useRipple = hooks$1.useRipple({
44
+ var themeColorVars = useThemeColorVars.useThemeColorVars(["primary", ["primary", tokens_stylex.OPACITY.thin], ["primary", tokens_stylex.OPACITY.medium], ["primary", tokens_stylex.OPACITY.thicker], "on-primary", "on-surface", ["on-surface", tokens_stylex.OPACITY.thin], ["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thicker], "on-surface-variant", "error", ["error", tokens_stylex.OPACITY.thin], ["error", tokens_stylex.OPACITY.medium], ["error", tokens_stylex.OPACITY.thicker], "on-error"]);
45
+ var _useRipple = hooks.useRipple({
47
46
  isDisabled: !ripple$1 || isDisabled
48
47
  }),
49
48
  ripples = _useRipple.ripples,
@@ -74,26 +73,6 @@ var Checkbox = function Checkbox(_ref) {
74
73
  _setIsChecked(checked);
75
74
  onChange === null || onChange === void 0 || onChange(event);
76
75
  });
77
- // style vars
78
- var styleVars = React.useMemo(function () {
79
- return {
80
- "--color-primary": theme$1.colors.primary,
81
- "--color-primary-opacity-08": color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin).toString(),
82
- "--color-primary-opacity-12": color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.medium).toString(),
83
- "--color-primary-opacity-20": color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thicker).toString(),
84
- "--color-on-primary": theme$1.colors["on-primary"],
85
- "--color-on-surface": theme$1.colors["on-surface"],
86
- "--color-on-surface-opacity-08": color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thin).toString(),
87
- "--color-on-surface-opacity-12": color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.medium).toString(),
88
- "--color-on-surface-opacity-20": color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker).toString(),
89
- "--color-on-surface-variant": theme$1.colors["on-surface-variant"],
90
- "--color-error": theme$1.colors.error,
91
- "--color-error-opacity-08": color.hexToRgba(theme$1.colors.error, tokens_stylex.OPACITY.thin).toString(),
92
- "--color-error-opacity-12": color.hexToRgba(theme$1.colors.error, tokens_stylex.OPACITY.medium).toString(),
93
- "--color-error-opacity-20": color.hexToRgba(theme$1.colors.error, tokens_stylex.OPACITY.thicker).toString(),
94
- "--color-on-error": theme$1.colors["on-error"]
95
- };
96
- }, [theme$1]);
97
76
  var styled = {
98
77
  checkbox: stylex.props(styles.default.checkbox["default"], styles.default.checkbox.medium, isDisabled && styles.default.checkbox.disabled),
99
78
  layer: stylex.props(styles.default.layer["default"]["default"], ripple$1 && [styles.default.layer.rippleable["default"], (isChecked || indeterminate) && styles.default.layer.rippleable.checked, invalid && styles.default.layer.rippleable.invalid, isDisabled && styles.default.layer.rippleable.disabled]),
@@ -104,7 +83,7 @@ var Checkbox = function Checkbox(_ref) {
104
83
  };
105
84
  return /*#__PURE__*/React.createElement("label", {
106
85
  className: className.stringify(classNames.checkbox, className$1, styled.checkbox.className),
107
- style: _objectSpread(_objectSpread(_objectSpread({}, styled.checkbox.style), style), styleVars),
86
+ style: _objectSpread(_objectSpread(_objectSpread({}, styled.checkbox.style), style), themeColorVars),
108
87
  "aria-checked": isChecked,
109
88
  "aria-disabled": isDisabled
110
89
  }, /*#__PURE__*/React.createElement("span", {
@@ -4,7 +4,6 @@ import React, { useContext, useMemo } from 'react';
4
4
  import { useControlledState, isUndefined, useEvent } from '@aiszlab/relax';
5
5
  import Context, { CLASS_NAMES } from './context.mjs';
6
6
  import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.17.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
7
- import { useTheme } from '../theme/hooks.mjs';
8
7
  import styles from './styles.mjs';
9
8
  import { useClassNames } from '../../hooks/use-class-names.mjs';
10
9
  import { stringify } from '@aiszlab/relax/class-name';
@@ -12,10 +11,10 @@ import Check from './check.mjs';
12
11
  import Indeterminate from './Indeterminate.mjs';
13
12
  import Ripple from '../ripple/ripple.mjs';
14
13
  import { useRipple } from '../ripple/hooks.mjs';
15
- import { hexToRgba } from '@aiszlab/fuzzy/color';
16
14
  import { OPACITY } from '../theme/tokens.stylex.mjs';
17
15
  import { stopPropagation } from '@aiszlab/relax/dom';
18
16
  import { $label } from '../theme/theme.mjs';
17
+ import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
19
18
 
20
19
  var Checkbox = function Checkbox(_ref) {
21
20
  var _contextValue$isDisab;
@@ -37,8 +36,8 @@ var Checkbox = function Checkbox(_ref) {
37
36
  defaultChecked = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked;
38
37
  var contextValue = useContext(Context);
39
38
  var classNames = useClassNames(CLASS_NAMES);
40
- var theme = useTheme();
41
39
  var isDisabled = (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : disabled;
40
+ var themeColorVars = useThemeColorVars(["primary", ["primary", OPACITY.thin], ["primary", OPACITY.medium], ["primary", OPACITY.thicker], "on-primary", "on-surface", ["on-surface", OPACITY.thin], ["on-surface", OPACITY.medium], ["on-surface", OPACITY.thicker], "on-surface-variant", "error", ["error", OPACITY.thin], ["error", OPACITY.medium], ["error", OPACITY.thicker], "on-error"]);
42
41
  var _useRipple = useRipple({
43
42
  isDisabled: !ripple || isDisabled
44
43
  }),
@@ -70,26 +69,6 @@ var Checkbox = function Checkbox(_ref) {
70
69
  _setIsChecked(checked);
71
70
  onChange === null || onChange === void 0 || onChange(event);
72
71
  });
73
- // style vars
74
- var styleVars = useMemo(function () {
75
- return {
76
- "--color-primary": theme.colors.primary,
77
- "--color-primary-opacity-08": hexToRgba(theme.colors.primary, OPACITY.thin).toString(),
78
- "--color-primary-opacity-12": hexToRgba(theme.colors.primary, OPACITY.medium).toString(),
79
- "--color-primary-opacity-20": hexToRgba(theme.colors.primary, OPACITY.thicker).toString(),
80
- "--color-on-primary": theme.colors["on-primary"],
81
- "--color-on-surface": theme.colors["on-surface"],
82
- "--color-on-surface-opacity-08": hexToRgba(theme.colors["on-surface"], OPACITY.thin).toString(),
83
- "--color-on-surface-opacity-12": hexToRgba(theme.colors["on-surface"], OPACITY.medium).toString(),
84
- "--color-on-surface-opacity-20": hexToRgba(theme.colors["on-surface"], OPACITY.thicker).toString(),
85
- "--color-on-surface-variant": theme.colors["on-surface-variant"],
86
- "--color-error": theme.colors.error,
87
- "--color-error-opacity-08": hexToRgba(theme.colors.error, OPACITY.thin).toString(),
88
- "--color-error-opacity-12": hexToRgba(theme.colors.error, OPACITY.medium).toString(),
89
- "--color-error-opacity-20": hexToRgba(theme.colors.error, OPACITY.thicker).toString(),
90
- "--color-on-error": theme.colors["on-error"]
91
- };
92
- }, [theme]);
93
72
  var styled = {
94
73
  checkbox: props(styles.checkbox["default"], styles.checkbox.medium, isDisabled && styles.checkbox.disabled),
95
74
  layer: props(styles.layer["default"]["default"], ripple && [styles.layer.rippleable["default"], (isChecked || indeterminate) && styles.layer.rippleable.checked, invalid && styles.layer.rippleable.invalid, isDisabled && styles.layer.rippleable.disabled]),
@@ -100,7 +79,7 @@ var Checkbox = function Checkbox(_ref) {
100
79
  };
101
80
  return /*#__PURE__*/React.createElement("label", {
102
81
  className: stringify(classNames.checkbox, className, styled.checkbox.className),
103
- style: _objectSpread(_objectSpread(_objectSpread({}, styled.checkbox.style), style), styleVars),
82
+ style: _objectSpread(_objectSpread(_objectSpread({}, styled.checkbox.style), style), themeColorVars),
104
83
  "aria-checked": isChecked,
105
84
  "aria-disabled": isDisabled
106
85
  }, /*#__PURE__*/React.createElement("span", {
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var hoc = require('../../hoc.cjs');
7
+
8
+ var CalendarToday = hoc.withIcon(function (_ref) {
9
+ var size = _ref.size;
10
+ return /*#__PURE__*/React.createElement("svg", {
11
+ xmlns: "http://www.w3.org/2000/svg",
12
+ width: size,
13
+ height: size,
14
+ viewBox: "0 0 24 24",
15
+ fill: "none"
16
+ }, /*#__PURE__*/React.createElement("path", {
17
+ d: "M20 3H19V1H17V3H7V1H5V3H4C2.9 3 2 3.9 2 5V21C2 22.1 2.9 23 4 23H20C21.1 23 22 22.1 22 21V5C22 3.9 21.1 3 20 3ZM20 21H4V10H20V21ZM20 8H4V5H20V8Z",
18
+ fill: "currentColor"
19
+ }));
20
+ });
21
+
22
+ exports.default = CalendarToday;
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare const CalendarToday: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
3
+ export default CalendarToday;
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { withIcon } from '../../hoc.mjs';
3
+
4
+ var CalendarToday = withIcon(function (_ref) {
5
+ var size = _ref.size;
6
+ return /*#__PURE__*/React.createElement("svg", {
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ width: size,
9
+ height: size,
10
+ viewBox: "0 0 24 24",
11
+ fill: "none"
12
+ }, /*#__PURE__*/React.createElement("path", {
13
+ d: "M20 3H19V1H17V3H7V1H5V3H4C2.9 3 2 3.9 2 5V21C2 22.1 2.9 23 4 23H20C21.1 23 22 22.1 22 21V5C22 3.9 21.1 3 20 3ZM20 21H4V10H20V21ZM20 8H4V5H20V8Z",
14
+ fill: "currentColor"
15
+ }));
16
+ });
17
+
18
+ export { CalendarToday as default };
@@ -21,6 +21,7 @@ var preview = require('./preview.cjs');
21
21
  var logout = require('./logout.cjs');
22
22
  var schedule = require('./schedule.cjs');
23
23
  var turnedIn = require('./turned-in.cjs');
24
+ var calendarToday = require('./calendar-today.cjs');
24
25
 
25
26
 
26
27
 
@@ -45,3 +46,4 @@ exports.Preview = preview.default;
45
46
  exports.Logout = logout.default;
46
47
  exports.Schedule = schedule.default;
47
48
  exports.TurnedIn = turnedIn.default;
49
+ exports.CalendarToday = calendarToday.default;
@@ -19,4 +19,5 @@ import Preview from "./preview";
19
19
  import Logout from "./logout";
20
20
  import Schedule from "./schedule";
21
21
  import TurnedIn from "./turned-in";
22
- export { Visibility, VisibilityOff, CheckCircleOutline, Done, CheckCircle, SwapHoriz, SwapVert, ZoomOut, ZoomIn, DoneOutline, Translate, Code, OpenInNew, Delete, ThreeDRotation, AccountCircle, RocketLaunch, Preview, Logout, Schedule, TurnedIn, };
22
+ import CalendarToday from "./calendar-today";
23
+ export { Visibility, VisibilityOff, CheckCircleOutline, Done, CheckCircle, SwapHoriz, SwapVert, ZoomOut, ZoomIn, DoneOutline, Translate, Code, OpenInNew, Delete, ThreeDRotation, AccountCircle, RocketLaunch, Preview, Logout, Schedule, TurnedIn, CalendarToday, };
@@ -19,3 +19,4 @@ export { default as Preview } from './preview.mjs';
19
19
  export { default as Logout } from './logout.mjs';
20
20
  export { default as Schedule } from './schedule.mjs';
21
21
  export { default as TurnedIn } from './turned-in.mjs';
22
+ export { default as CalendarToday } from './calendar-today.mjs';
@@ -0,0 +1,2 @@
1
+ import LocationOn from "./location-on";
2
+ export { LocationOn };
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var hoc = require('../../hoc.cjs');
7
+
8
+ var LocationOn = hoc.withIcon(function (_ref) {
9
+ var size = _ref.size;
10
+ return /*#__PURE__*/React.createElement("svg", {
11
+ xmlns: "http://www.w3.org/2000/svg",
12
+ width: size,
13
+ height: size,
14
+ viewBox: "0 0 24 24",
15
+ fill: "none"
16
+ }, /*#__PURE__*/React.createElement("path", {
17
+ d: "M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 11.88 14.12 16.19 12 18.88C9.92 16.21 7 11.85 7 9Z",
18
+ fill: "currentColor"
19
+ }), /*#__PURE__*/React.createElement("path", {
20
+ d: "M12 11.5C13.3807 11.5 14.5 10.3807 14.5 9C14.5 7.61929 13.3807 6.5 12 6.5C10.6193 6.5 9.5 7.61929 9.5 9C9.5 10.3807 10.6193 11.5 12 11.5Z",
21
+ fill: "currentColor"
22
+ }));
23
+ });
24
+
25
+ exports.default = LocationOn;
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare const LocationOn: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
3
+ export default LocationOn;
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import { withIcon } from '../../hoc.mjs';
3
+
4
+ var LocationOn = withIcon(function (_ref) {
5
+ var size = _ref.size;
6
+ return /*#__PURE__*/React.createElement("svg", {
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ width: size,
9
+ height: size,
10
+ viewBox: "0 0 24 24",
11
+ fill: "none"
12
+ }, /*#__PURE__*/React.createElement("path", {
13
+ d: "M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 11.88 14.12 16.19 12 18.88C9.92 16.21 7 11.85 7 9Z",
14
+ fill: "currentColor"
15
+ }), /*#__PURE__*/React.createElement("path", {
16
+ d: "M12 11.5C13.3807 11.5 14.5 10.3807 14.5 9C14.5 7.61929 13.3807 6.5 12 6.5C10.6193 6.5 9.5 7.61929 9.5 9C9.5 10.3807 10.6193 11.5 12 11.5Z",
17
+ fill: "currentColor"
18
+ }));
19
+ });
20
+
21
+ export { LocationOn as default };
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var hoc = require('../../hoc.cjs');
7
+
8
+ var Add = hoc.withIcon(function (_ref) {
9
+ var size = _ref.size;
10
+ return /*#__PURE__*/React.createElement("svg", {
11
+ xmlns: "http://www.w3.org/2000/svg",
12
+ width: size,
13
+ height: size,
14
+ viewBox: "0 0 14 14",
15
+ fill: "none"
16
+ }, /*#__PURE__*/React.createElement("path", {
17
+ d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z",
18
+ fill: "currentColor"
19
+ }));
20
+ });
21
+
22
+ exports.default = Add;
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare const Add: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
3
+ export default Add;
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { withIcon } from '../../hoc.mjs';
3
+
4
+ var Add = withIcon(function (_ref) {
5
+ var size = _ref.size;
6
+ return /*#__PURE__*/React.createElement("svg", {
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ width: size,
9
+ height: size,
10
+ viewBox: "0 0 14 14",
11
+ fill: "none"
12
+ }, /*#__PURE__*/React.createElement("path", {
13
+ d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z",
14
+ fill: "currentColor"
15
+ }));
16
+ });
17
+
18
+ export { Add as default };
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var hoc = require('../../hoc.cjs');
7
7
 
8
- var Redo = hoc.withIcon(function (_ref) {
8
+ var Clear = hoc.withIcon(function (_ref) {
9
9
  var size = _ref.size;
10
10
  return /*#__PURE__*/React.createElement("svg", {
11
11
  xmlns: "http://www.w3.org/2000/svg",
@@ -19,4 +19,4 @@ var Redo = hoc.withIcon(function (_ref) {
19
19
  }));
20
20
  });
21
21
 
22
- exports.default = Redo;
22
+ exports.default = Clear;
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
- declare const Redo: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
3
- export default Redo;
2
+ declare const Clear: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
3
+ export default Clear;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { withIcon } from '../../hoc.mjs';
3
3
 
4
- var Redo = withIcon(function (_ref) {
4
+ var Clear = withIcon(function (_ref) {
5
5
  var size = _ref.size;
6
6
  return /*#__PURE__*/React.createElement("svg", {
7
7
  xmlns: "http://www.w3.org/2000/svg",
@@ -15,4 +15,4 @@ var Redo = withIcon(function (_ref) {
15
15
  }));
16
16
  });
17
17
 
18
- export { Redo as default };
18
+ export { Clear as default };
@@ -5,6 +5,8 @@ var redo = require('./redo.cjs');
5
5
  var undo = require('./undo.cjs');
6
6
  var linkOff = require('./link-off.cjs');
7
7
  var fontDownload = require('./font-download.cjs');
8
+ var remove = require('./remove.cjs');
9
+ var add = require('./add.cjs');
8
10
 
9
11
 
10
12
 
@@ -13,3 +15,5 @@ exports.Redo = redo.default;
13
15
  exports.Undo = undo.default;
14
16
  exports.LinkOff = linkOff.default;
15
17
  exports.FontDownload = fontDownload.default;
18
+ exports.Remove = remove.default;
19
+ exports.Add = add.default;
@@ -3,4 +3,6 @@ import Redo from "./redo";
3
3
  import Undo from "./undo";
4
4
  import LinkOff from "./link-off";
5
5
  import FontDownload from "./font-download";
6
- export { Clear, Redo, Undo, LinkOff, FontDownload };
6
+ import Remove from "./remove";
7
+ import Add from "./add";
8
+ export { Clear, Redo, Undo, LinkOff, FontDownload, Remove, Add };