@fluentui-copilot/react-send-button 0.0.0-nightly-20250717-0405-eecbae35.1 → 0.0.0-nightly-20250723-0404-b6756f49.1

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 (7) hide show
  1. package/CHANGELOG.json +18 -3
  2. package/CHANGELOG.md +13 -4
  3. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js +193 -0
  4. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -0
  5. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js +209 -0
  6. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -0
  7. package/package.json +4 -4
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui-copilot/react-send-button",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 17 Jul 2025 04:13:02 GMT",
6
- "tag": "@fluentui-copilot/react-send-button_v0.0.0-nightly-20250717-0405-eecbae35.1",
7
- "version": "0.0.0-nightly-20250717-0405-eecbae35.1",
5
+ "date": "Wed, 23 Jul 2025 04:11:47 GMT",
6
+ "tag": "@fluentui-copilot/react-send-button_v0.0.0-nightly-20250723-0404-b6756f49.1",
7
+ "version": "0.0.0-nightly-20250723-0404-b6756f49.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,6 +16,21 @@
16
16
  ]
17
17
  }
18
18
  },
19
+ {
20
+ "date": "Thu, 17 Jul 2025 17:49:25 GMT",
21
+ "tag": "@fluentui-copilot/react-send-button_v0.1.3",
22
+ "version": "0.1.3",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "hochelmartin@gmail.com",
27
+ "package": "@fluentui-copilot/react-send-button",
28
+ "commit": "fef5160c07333e8d9996952a305b34e357604919",
29
+ "comment": "feat: enable griffel raw styles"
30
+ }
31
+ ]
32
+ }
33
+ },
19
34
  {
20
35
  "date": "Tue, 01 Jul 2025 14:45:29 GMT",
21
36
  "tag": "@fluentui-copilot/react-send-button_v0.1.2",
package/CHANGELOG.md CHANGED
@@ -1,18 +1,27 @@
1
1
  # Change Log - @fluentui-copilot/react-send-button
2
2
 
3
- This log was last generated on Thu, 17 Jul 2025 04:13:02 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 23 Jul 2025 04:11:47 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250717-0405-eecbae35.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.0-nightly-20250717-0405-eecbae35.1)
7
+ ## [0.0.0-nightly-20250723-0404-b6756f49.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.0-nightly-20250723-0404-b6756f49.1)
8
8
 
9
- Thu, 17 Jul 2025 04:13:02 GMT
10
- [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.2..@fluentui-copilot/react-send-button_v0.0.0-nightly-20250717-0405-eecbae35.1)
9
+ Wed, 23 Jul 2025 04:11:47 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.3..@fluentui-copilot/react-send-button_v0.0.0-nightly-20250723-0404-b6756f49.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
15
15
 
16
+ ## [0.1.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.3)
17
+
18
+ Thu, 17 Jul 2025 17:49:25 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.2..@fluentui-copilot/react-send-button_v0.1.3)
20
+
21
+ ### Patches
22
+
23
+ - feat: enable griffel raw styles ([PR #3227](https://github.com/microsoft/fluentai/pull/3227) by hochelmartin@gmail.com)
24
+
16
25
  ## [0.1.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.2)
17
26
 
18
27
  Tue, 01 Jul 2025 14:45:29 GMT
package/lib/components/SendButton/useSendButtonStyles.styles.raw.js ADDED
@@ -0,0 +1,193 @@
1
+ import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
2
+ import { tokens } from '@fluentui-copilot/tokens';
3
+ export const sendButtonClassNames = {
4
+ root: 'fai-SendButton',
5
+ sendIcon: 'fai-SendButton__sendIcon',
6
+ stopIcon: 'fai-SendButton__stopIcon',
7
+ stopBackground: 'fai-SendButton__stopBackground',
8
+ sendButtonMotion: 'fai-SendButton__sendButtonMotion',
9
+ stopButtonMotion: 'fai-SendButton__stopButtonMotion',
10
+ stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion'
11
+ };
12
+ /**
13
+ * Styles for the root slot
14
+ */ const useStyles = makeStyles({
15
+ root: {
16
+ display: 'flex',
17
+ width: '32px',
18
+ minWidth: '32px',
19
+ height: '32px',
20
+ alignItems: 'center',
21
+ padding: '0'
22
+ },
23
+ baseIconButton: {
24
+ position: 'absolute',
25
+ alignItems: 'center',
26
+ display: 'inline-flex',
27
+ justifyContent: 'center',
28
+ fontSize: tokens.fontSizeBase500,
29
+ height: '20px',
30
+ width: '20px'
31
+ },
32
+ disabled: {
33
+ color: tokens.colorNeutralForegroundDisabled
34
+ },
35
+ iconFilled: {
36
+ color: tokens.colorCompoundBrandBackground,
37
+ ':hover': {
38
+ color: tokens.colorCompoundBrandBackgroundHover
39
+ }
40
+ },
41
+ stopBackground: {
42
+ position: 'absolute',
43
+ width: 'inherit',
44
+ height: 'inherit',
45
+ borderRadius: tokens.borderRadiusCircular,
46
+ /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/ backgroundColor: tokens.colorBrandBackground2
47
+ }
48
+ });
49
+ const useNextStyles = makeStyles({
50
+ baseIconButton: {
51
+ display: 'inline-flex',
52
+ justifyContent: 'center',
53
+ gridArea: 'button',
54
+ position: 'initial',
55
+ zIndex: 1,
56
+ color: tokens.colorNeutralForegroundOnBrand
57
+ },
58
+ dictationActive: {
59
+ color: tokens.colorNeutralForeground2
60
+ },
61
+ sendIconFilled: {
62
+ color: tokens.colorNeutralForegroundOnBrand
63
+ },
64
+ stopIconFilled: {
65
+ color: tokens.colorBrandForeground2
66
+ },
67
+ stopBackground: {
68
+ gridArea: 'button',
69
+ height: '100%',
70
+ width: '100%',
71
+ borderRadius: tokens.borderRadiusCircular,
72
+ backgroundColor: tokens.colorBrandBackground
73
+ },
74
+ stopBackgroundSending: {
75
+ backgroundColor: tokens.colorBrandBackground2
76
+ },
77
+ stopBackgroundDictationActive: {
78
+ backgroundColor: tokens.colorTransparentBackground
79
+ },
80
+ disabled: {
81
+ color: tokens.colorNeutralForegroundDisabled
82
+ },
83
+ stopBackgroundDisabled: {
84
+ backgroundColor: tokens.colorNeutralBackgroundDisabled
85
+ }
86
+ });
87
+ const useRootNextStyles = makeStyles({
88
+ root: {
89
+ display: 'grid',
90
+ gridTemplateAreas: `"button"`,
91
+ gridTemplateRows: '1fr',
92
+ gridTemplateColumns: '1fr',
93
+ justifyItems: 'center',
94
+ alignItems: 'center',
95
+ padding: tokens.spacingVerticalNone,
96
+ border: 'none',
97
+ position: 'relative',
98
+ ...createCustomFocusIndicatorStyle({
99
+ outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
100
+ boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`
101
+ })
102
+ },
103
+ canvas: {
104
+ minWidth: '40px',
105
+ height: '40px'
106
+ },
107
+ sidecar: {
108
+ minWidth: '32px',
109
+ height: '32px'
110
+ },
111
+ notSending: {
112
+ ':hover': {
113
+ [`& .${sendButtonClassNames.stopBackground}`]: {
114
+ backgroundColor: tokens.colorBrandBackgroundHover
115
+ },
116
+ [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
117
+ color: tokens.colorNeutralForegroundOnBrand
118
+ }
119
+ },
120
+ ':active': {
121
+ [`& .${sendButtonClassNames.stopBackground}`]: {
122
+ backgroundColor: tokens.colorBrandBackgroundPressed
123
+ }
124
+ }
125
+ },
126
+ notSendingDictationActive: {
127
+ ':hover': {
128
+ [`& .${sendButtonClassNames.stopBackground}`]: {
129
+ backgroundColor: tokens.colorSubtleBackgroundHover
130
+ },
131
+ [`& .${sendButtonClassNames.sendIcon}`]: {
132
+ color: tokens.colorNeutralForeground2Hover
133
+ }
134
+ },
135
+ ':active': {
136
+ [`& .${sendButtonClassNames.stopBackground}`]: {
137
+ backgroundColor: tokens.colorSubtleBackgroundPressed
138
+ },
139
+ [`& .${sendButtonClassNames.sendIcon}`]: {
140
+ color: tokens.colorNeutralForeground2Pressed
141
+ }
142
+ }
143
+ },
144
+ sending: {
145
+ ':hover': {
146
+ [`& .${sendButtonClassNames.stopBackground}`]: {
147
+ backgroundColor: tokens.colorBrandBackground2Hover
148
+ },
149
+ [`& .${sendButtonClassNames.stopIcon}`]: {
150
+ color: tokens.colorBrandForeground2Hover
151
+ }
152
+ },
153
+ ':active': {
154
+ [`& .${sendButtonClassNames.stopBackground}`]: {
155
+ backgroundColor: tokens.colorBrandBackground2Pressed
156
+ },
157
+ [`& .${sendButtonClassNames.stopIcon}`]: {
158
+ color: tokens.colorBrandForeground2Pressed
159
+ }
160
+ }
161
+ }
162
+ });
163
+ /**
164
+ * Apply styling to the SendButton slots based on the state
165
+ */ export const useSendButtonStyles_unstable = (state)=>{
166
+ 'use no memo';
167
+ const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;
168
+ const styles = useStyles();
169
+ const nextStyles = useNextStyles();
170
+ const rootNextStyles = useRootNextStyles();
171
+ const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
172
+ const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
173
+ state.root.className = mergeClasses(sendButtonClassNames.root, designVersion === 'next' ? rootNextStyles.root : styles.root, isSendIconFilled && sendIconFilledStyle, (state.isButtonMotionRunning || isSending) && sendIconFilledStyle, designVersion === 'next' && rootNextStyles[mode], designVersion === 'next' && rootNextStyles.root, !disabled && designVersion === 'next' && !isSending && (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending), !disabled && designVersion === 'next' && isSending && rootNextStyles.sending, disabled && styles.disabled, state.root.className);
174
+ if (state.sendIcon) {
175
+ state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
176
+ }
177
+ if (state.stopIcon) {
178
+ state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
179
+ }
180
+ if (state.stopBackground) {
181
+ state.stopBackground.className = mergeClasses(sendButtonClassNames.stopBackground, designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground, designVersion === 'next' && isSending && nextStyles.stopBackgroundSending, designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive, designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled, state.stopBackground.className);
182
+ }
183
+ // Add style hooks from button
184
+ useButtonStyles_unstable({
185
+ ...state,
186
+ components: {
187
+ ...state.components,
188
+ icon: 'span'
189
+ },
190
+ iconOnly: false
191
+ });
192
+ return state;
193
+ };
package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: 'none',\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n }),\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","useSendButtonStyles_unstable","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js ADDED
@@ -0,0 +1,209 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ sendButtonClassNames: function() {
13
+ return sendButtonClassNames;
14
+ },
15
+ useSendButtonStyles_unstable: function() {
16
+ return useSendButtonStyles_unstable;
17
+ }
18
+ });
19
+ const _reactcomponents = require("@fluentui/react-components");
20
+ const _tokens = require("@fluentui-copilot/tokens");
21
+ const sendButtonClassNames = {
22
+ root: 'fai-SendButton',
23
+ sendIcon: 'fai-SendButton__sendIcon',
24
+ stopIcon: 'fai-SendButton__stopIcon',
25
+ stopBackground: 'fai-SendButton__stopBackground',
26
+ sendButtonMotion: 'fai-SendButton__sendButtonMotion',
27
+ stopButtonMotion: 'fai-SendButton__stopButtonMotion',
28
+ stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion'
29
+ };
30
+ /**
31
+ * Styles for the root slot
32
+ */ const useStyles = (0, _reactcomponents.makeStyles)({
33
+ root: {
34
+ display: 'flex',
35
+ width: '32px',
36
+ minWidth: '32px',
37
+ height: '32px',
38
+ alignItems: 'center',
39
+ padding: '0'
40
+ },
41
+ baseIconButton: {
42
+ position: 'absolute',
43
+ alignItems: 'center',
44
+ display: 'inline-flex',
45
+ justifyContent: 'center',
46
+ fontSize: _tokens.tokens.fontSizeBase500,
47
+ height: '20px',
48
+ width: '20px'
49
+ },
50
+ disabled: {
51
+ color: _tokens.tokens.colorNeutralForegroundDisabled
52
+ },
53
+ iconFilled: {
54
+ color: _tokens.tokens.colorCompoundBrandBackground,
55
+ ':hover': {
56
+ color: _tokens.tokens.colorCompoundBrandBackgroundHover
57
+ }
58
+ },
59
+ stopBackground: {
60
+ position: 'absolute',
61
+ width: 'inherit',
62
+ height: 'inherit',
63
+ borderRadius: _tokens.tokens.borderRadiusCircular,
64
+ /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/ backgroundColor: _tokens.tokens.colorBrandBackground2
65
+ }
66
+ });
67
+ const useNextStyles = (0, _reactcomponents.makeStyles)({
68
+ baseIconButton: {
69
+ display: 'inline-flex',
70
+ justifyContent: 'center',
71
+ gridArea: 'button',
72
+ position: 'initial',
73
+ zIndex: 1,
74
+ color: _tokens.tokens.colorNeutralForegroundOnBrand
75
+ },
76
+ dictationActive: {
77
+ color: _tokens.tokens.colorNeutralForeground2
78
+ },
79
+ sendIconFilled: {
80
+ color: _tokens.tokens.colorNeutralForegroundOnBrand
81
+ },
82
+ stopIconFilled: {
83
+ color: _tokens.tokens.colorBrandForeground2
84
+ },
85
+ stopBackground: {
86
+ gridArea: 'button',
87
+ height: '100%',
88
+ width: '100%',
89
+ borderRadius: _tokens.tokens.borderRadiusCircular,
90
+ backgroundColor: _tokens.tokens.colorBrandBackground
91
+ },
92
+ stopBackgroundSending: {
93
+ backgroundColor: _tokens.tokens.colorBrandBackground2
94
+ },
95
+ stopBackgroundDictationActive: {
96
+ backgroundColor: _tokens.tokens.colorTransparentBackground
97
+ },
98
+ disabled: {
99
+ color: _tokens.tokens.colorNeutralForegroundDisabled
100
+ },
101
+ stopBackgroundDisabled: {
102
+ backgroundColor: _tokens.tokens.colorNeutralBackgroundDisabled
103
+ }
104
+ });
105
+ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
106
+ root: {
107
+ display: 'grid',
108
+ gridTemplateAreas: `"button"`,
109
+ gridTemplateRows: '1fr',
110
+ gridTemplateColumns: '1fr',
111
+ justifyItems: 'center',
112
+ alignItems: 'center',
113
+ padding: _tokens.tokens.spacingVerticalNone,
114
+ border: 'none',
115
+ position: 'relative',
116
+ ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
117
+ outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorTransparentStroke}`,
118
+ boxShadow: `0 0 0 ${_tokens.tokens.strokeWidthThick} ${_tokens.tokens.colorStrokeFocus2}`
119
+ })
120
+ },
121
+ canvas: {
122
+ minWidth: '40px',
123
+ height: '40px'
124
+ },
125
+ sidecar: {
126
+ minWidth: '32px',
127
+ height: '32px'
128
+ },
129
+ notSending: {
130
+ ':hover': {
131
+ [`& .${sendButtonClassNames.stopBackground}`]: {
132
+ backgroundColor: _tokens.tokens.colorBrandBackgroundHover
133
+ },
134
+ [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
135
+ color: _tokens.tokens.colorNeutralForegroundOnBrand
136
+ }
137
+ },
138
+ ':active': {
139
+ [`& .${sendButtonClassNames.stopBackground}`]: {
140
+ backgroundColor: _tokens.tokens.colorBrandBackgroundPressed
141
+ }
142
+ }
143
+ },
144
+ notSendingDictationActive: {
145
+ ':hover': {
146
+ [`& .${sendButtonClassNames.stopBackground}`]: {
147
+ backgroundColor: _tokens.tokens.colorSubtleBackgroundHover
148
+ },
149
+ [`& .${sendButtonClassNames.sendIcon}`]: {
150
+ color: _tokens.tokens.colorNeutralForeground2Hover
151
+ }
152
+ },
153
+ ':active': {
154
+ [`& .${sendButtonClassNames.stopBackground}`]: {
155
+ backgroundColor: _tokens.tokens.colorSubtleBackgroundPressed
156
+ },
157
+ [`& .${sendButtonClassNames.sendIcon}`]: {
158
+ color: _tokens.tokens.colorNeutralForeground2Pressed
159
+ }
160
+ }
161
+ },
162
+ sending: {
163
+ ':hover': {
164
+ [`& .${sendButtonClassNames.stopBackground}`]: {
165
+ backgroundColor: _tokens.tokens.colorBrandBackground2Hover
166
+ },
167
+ [`& .${sendButtonClassNames.stopIcon}`]: {
168
+ color: _tokens.tokens.colorBrandForeground2Hover
169
+ }
170
+ },
171
+ ':active': {
172
+ [`& .${sendButtonClassNames.stopBackground}`]: {
173
+ backgroundColor: _tokens.tokens.colorBrandBackground2Pressed
174
+ },
175
+ [`& .${sendButtonClassNames.stopIcon}`]: {
176
+ color: _tokens.tokens.colorBrandForeground2Pressed
177
+ }
178
+ }
179
+ }
180
+ });
181
+ const useSendButtonStyles_unstable = (state)=>{
182
+ 'use no memo';
183
+ const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;
184
+ const styles = useStyles();
185
+ const nextStyles = useNextStyles();
186
+ const rootNextStyles = useRootNextStyles();
187
+ const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
188
+ const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
189
+ state.root.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.root, designVersion === 'next' ? rootNextStyles.root : styles.root, isSendIconFilled && sendIconFilledStyle, (state.isButtonMotionRunning || isSending) && sendIconFilledStyle, designVersion === 'next' && rootNextStyles[mode], designVersion === 'next' && rootNextStyles.root, !disabled && designVersion === 'next' && !isSending && (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending), !disabled && designVersion === 'next' && isSending && rootNextStyles.sending, disabled && styles.disabled, state.root.className);
190
+ if (state.sendIcon) {
191
+ state.sendIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
192
+ }
193
+ if (state.stopIcon) {
194
+ state.stopIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
195
+ }
196
+ if (state.stopBackground) {
197
+ state.stopBackground.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopBackground, designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground, designVersion === 'next' && isSending && nextStyles.stopBackgroundSending, designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive, designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled, state.stopBackground.className);
198
+ }
199
+ // Add style hooks from button
200
+ (0, _reactcomponents.useButtonStyles_unstable)({
201
+ ...state,
202
+ components: {
203
+ ...state.components,
204
+ icon: 'span'
205
+ },
206
+ iconOnly: false
207
+ });
208
+ return state;
209
+ };
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: 'none',\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n }),\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["sendButtonClassNames","useSendButtonStyles_unstable","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","makeStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","tokens","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","mergeClasses","isButtonMotionRunning","useButtonStyles_unstable","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-send-button",
3
- "version": "0.0.0-nightly-20250717-0405-eecbae35.1",
3
+ "version": "0.0.0-nightly-20250723-0404-b6756f49.1",
4
4
  "description": "Fluent AI control for the send button used in ChatInput and PromptInput.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,9 +12,9 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "0.0.0-nightly-20250717-0405-eecbae35.1",
16
- "@fluentui-copilot/react-utilities": "0.0.0-nightly-20250717-0405-eecbae35.1",
17
- "@fluentui-copilot/tokens": "0.0.0-nightly-20250717-0405-eecbae35.1",
15
+ "@fluentui-copilot/react-provider": "0.0.0-nightly-20250723-0404-b6756f49.1",
16
+ "@fluentui-copilot/react-utilities": "0.0.0-nightly-20250723-0404-b6756f49.1",
17
+ "@fluentui-copilot/tokens": "0.0.0-nightly-20250723-0404-b6756f49.1",
18
18
  "@swc/helpers": "^0.5.1"
19
19
  },
20
20
  "peerDependencies": {