npm - @fluentui-copilot/react-send-button - Versions diffs - 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251013-0406-7c7739c8.1 - Mend

@fluentui-copilot/react-send-button 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251013-0406-7c7739c8.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 (44) hide show

package/lib/components/SendButton/useSendButtonStyles.styles.js ADDED Viewed

@@ -0,0 +1,270 @@
+import { __styles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle, shorthands } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const sendButtonClassNames = {
+  root: 'fai-SendButton',
+  sendIcon: 'fai-SendButton__sendIcon',
+  stopIcon: 'fai-SendButton__stopIcon',
+  stopBackground: 'fai-SendButton__stopBackground',
+  sendButtonMotion: 'fai-SendButton__sendButtonMotion',
+  stopButtonMotion: 'fai-SendButton__stopButtonMotion',
+  stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = __styles({
+  root: {
+    mc9l5x: "f22iagw",
+    a9b677: "f1szoe96",
+    Bf4jedk: "fwbmr0d",
+    Bqenvij: "f1d2rq10",
+    Bt984gj: "f122n59",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai"
+  },
+  baseIconButton: {
+    qhf8xq: "f1euv43f",
+    Bt984gj: "f122n59",
+    mc9l5x: "ftuwxu6",
+    Brf1p80: "f4d9j23",
+    Be2twd7: "f1pp30po",
+    Bqenvij: "fjamq6b",
+    a9b677: "f64fuq3"
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o"
+  },
+  iconFilled: {
+    sj55zd: "f1oyzx04",
+    Bi91k9c: "f1m1wcaq"
+  },
+  stopBackground: {
+    qhf8xq: "f1euv43f",
+    a9b677: "f2q8o33",
+    Bqenvij: "fwk23hs",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9",
+    De3pzq: "f16xkysk"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1szoe96{width:32px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".f122n59{align-items:center;}", [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], ".f1euv43f{position:absolute;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1oyzx04{color:var(--colorCompoundBrandBackground);}", ".f2q8o33{width:inherit;}", ".fwk23hs{height:inherit;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".f16xkysk{background-color:var(--colorBrandBackground2);}"],
+  h: [".f1m1wcaq:hover{color:var(--colorCompoundBrandBackgroundHover);}"]
+});
+const useNextStyles = __styles({
+  baseIconButton: {
+    mc9l5x: "ftuwxu6",
+    Brf1p80: "f4d9j23",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fwzfryc",
+    qhf8xq: "f1tmlkn4",
+    Bj3rh1h: "f19g0ac",
+    sj55zd: "f1phragk",
+    B7iucu3: "fqc85l4"
+  },
+  baseIconButtonSidecar: {
+    a9b677: "fjw5fx7",
+    Bqenvij: "fd461yt"
+  },
+  dictationActive: {
+    sj55zd: "fkfq4zb"
+  },
+  sendIconFilled: {
+    sj55zd: "f1phragk"
+  },
+  stopIconFilled: {
+    sj55zd: "faj9fo0"
+  },
+  stopBackground: {
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fwzfryc",
+    Bqenvij: "f1l02sjl",
+    a9b677: "fly5x3f",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9",
+    De3pzq: "ffp7eso"
+  },
+  stopBackgroundSending: {
+    De3pzq: "f16xkysk"
+  },
+  stopBackgroundDictationActive: {
+    De3pzq: "f1c21dwh"
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o"
+  },
+  stopBackgroundDisabled: {
+    De3pzq: "f1bg9a2p"
+  }
+}, {
+  d: [".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", [".fwzfryc{grid-area:button;}", {
+    p: -1
+  }], ".f1tmlkn4{position:initial;}", ".f19g0ac{z-index:1;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", [".fwzfryc{grid-area:button;}", {
+    p: -1
+  }], ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"],
+  m: [["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useRootNextStyles = __styles({
+  root: {
+    mc9l5x: "f13qh94s",
+    zoa1oz: "f9o42qa",
+    wkccdc: "f1u7ey36",
+    Budl1dq: "f1c2z91y",
+    B7hvi0a: "f1oiokrs",
+    Bt984gj: "f122n59",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fv5o1b5",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f88035w",
+    qhf8xq: "f10pi13n",
+    Bfpq7zp: 0,
+    g9k6zt: 0,
+    Bn4voq9: 0,
+    giviqs: "f1m9av4t",
+    j6ew2k: "f1nlh5rk",
+    Bcq6wej: "fjq791v",
+    Jcjdmf: ["fkq2p2y", "f1sehlss"],
+    sc4o1m: "f11odvng",
+    Bosien3: ["f1sehlss", "fkq2p2y"],
+    B0a1hpu: "f12mm4ns"
+  },
+  canvas: {
+    Bf4jedk: "fwbmr0d",
+    Bqenvij: "f1d2rq10"
+  },
+  sidecar: {
+    Bf4jedk: "f107v6xj",
+    Bqenvij: "fxldao9"
+  },
+  notSending: {
+    Bmdhgnd: "fiaw31n",
+    Buhwtog: "fmv7hed",
+    Bsyoesm: "f10g5jnj",
+    B5xjowy: "f1hzts53",
+    f30giq: "f3l45fr"
+  },
+  notSendingDictationActive: {
+    Bmdhgnd: "fkhxdak",
+    Buhwtog: "fmv7hed",
+    jhc297: "f1dxmfzy",
+    B885nwu: "f175mo2",
+    f30giq: "f1zsivl",
+    Ba808g4: "f50srwi"
+  },
+  sending: {
+    Bmdhgnd: "f1hzdlu9",
+    Buhwtog: "fmv7hed",
+    uj1ttc: "fe9pnmy",
+    E4wjbi: "f18cpvo8",
+    f30giq: "f876z59",
+    Bssu2nw: "fqsoy9w"
+  }
+}, {
+  d: [".f13qh94s{display:grid;}", ".f9o42qa{grid-template-areas:\"button\";}", ".f1u7ey36{grid-template-rows:1fr;}", ".f1c2z91y{grid-template-columns:1fr;}", ".f1oiokrs{justify-items:center;}", ".f122n59{align-items:center;}", [".fv5o1b5{padding:var(--spacingVerticalNone);}", {
+    p: -1
+  }], [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".f10pi13n{position:relative;}", [".f1m9av4t[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke) inset;}", {
+    p: -1
+  }], ".f1nlh5rk[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2);}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".f107v6xj{min-width:28px;}", ".fxldao9{height:28px;}"],
+  m: [["@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f12mm4ns .fai-SendButton__stopBackground{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmv7hed:hover .fai-SendButton__stopBackground{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1hzts53:hover .fai-SendButton__sendIcon,.f1hzts53:hover .fai-SendButton__stopIcon{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f175mo2:hover .fai-SendButton__sendIcon{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f18cpvo8:hover .fai-SendButton__stopIcon{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]],
+  h: [".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}", ".f10g5jnj:hover .fai-SendButton__sendIcon,.f10g5jnj:hover .fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}", ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}", ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}", ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}", ".fe9pnmy:hover .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Hover);}"],
+  a: [".f3l45fr:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundPressed);}", ".f1zsivl:active .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundPressed);}", ".f50srwi:active .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Pressed);}", ".f876z59:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Pressed);}", ".fqsoy9w:active .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Pressed);}"]
+});
+/**
+ * Apply styling to the SendButton slots based on the state
+ */
+export const useSendButtonStyles_unstable = state => {
+  'use no memo';
+  const {
+    isDictationActive,
+    isSendIconFilled,
+    isSending,
+    disabled,
+    designVersion,
+    mode
+  } = state;
+  const styles = useStyles();
+  const nextStyles = useNextStyles();
+  const rootNextStyles = useRootNextStyles();
+  const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
+  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
+  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);
+  if (state.sendIcon) {
+    state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
+  }
+  if (state.stopIcon) {
+    state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
+  }
+  if (state.stopBackground) {
+    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);
+  }
+  // Add style hooks from button
+  useButtonStyles_unstable({
+    ...state,
+    components: {
+      ...state.components,
+      icon: 'span'
+    },
+    iconOnly: false
+  });
+  return state;
+};
+//# sourceMappingURL=useSendButtonStyles.styles.js.map

package/lib/components/SendButton/useSendButtonStyles.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\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 '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '32px',\n height: '32px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","shorthands","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","baseIconButtonSidecar","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","strokeWidthThin","colorTransparentStroke","outline","boxShadow","colorStrokeFocus2","borderColor","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/components/SendButton/useSendButtonStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,224 @@
+import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle, shorthands } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const sendButtonClassNames = {
+    root: 'fai-SendButton',
+    sendIcon: 'fai-SendButton__sendIcon',
+    stopIcon: 'fai-SendButton__stopIcon',
+    stopBackground: 'fai-SendButton__stopBackground',
+    sendButtonMotion: 'fai-SendButton__sendButtonMotion',
+    stopButtonMotion: 'fai-SendButton__stopButtonMotion',
+    stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        width: '32px',
+        minWidth: '32px',
+        height: '32px',
+        alignItems: 'center',
+        padding: '0'
+    },
+    baseIconButton: {
+        position: 'absolute',
+        alignItems: 'center',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        fontSize: tokens.fontSizeBase500,
+        height: '20px',
+        width: '20px'
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    iconFilled: {
+        color: tokens.colorCompoundBrandBackground,
+        ':hover': {
+            color: tokens.colorCompoundBrandBackgroundHover
+        }
+    },
+    stopBackground: {
+        position: 'absolute',
+        width: 'inherit',
+        height: 'inherit',
+        borderRadius: tokens.borderRadiusCircular,
+        /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/ backgroundColor: tokens.colorBrandBackground2
+    }
+});
+const useNextStyles = makeStyles({
+    baseIconButton: {
+        display: 'inline-flex',
+        justifyContent: 'center',
+        gridArea: 'button',
+        position: 'initial',
+        zIndex: 1,
+        color: tokens.colorNeutralForegroundOnBrand,
+        '@media (forced-colors: active)': {
+            color: 'HighlightText'
+        }
+    },
+    baseIconButtonSidecar: {
+        width: '16px',
+        height: '16px'
+    },
+    dictationActive: {
+        color: tokens.colorNeutralForeground2
+    },
+    sendIconFilled: {
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    stopIconFilled: {
+        color: tokens.colorBrandForeground2
+    },
+    stopBackground: {
+        gridArea: 'button',
+        height: '100%',
+        width: '100%',
+        borderRadius: tokens.borderRadiusCircular,
+        backgroundColor: tokens.colorBrandBackground
+    },
+    stopBackgroundSending: {
+        backgroundColor: tokens.colorBrandBackground2
+    },
+    stopBackgroundDictationActive: {
+        backgroundColor: tokens.colorTransparentBackground
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    stopBackgroundDisabled: {
+        backgroundColor: tokens.colorNeutralBackgroundDisabled
+    }
+});
+const useRootNextStyles = makeStyles({
+    root: {
+        display: 'grid',
+        gridTemplateAreas: `"button"`,
+        gridTemplateRows: '1fr',
+        gridTemplateColumns: '1fr',
+        justifyItems: 'center',
+        alignItems: 'center',
+        padding: tokens.spacingVerticalNone,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+        position: 'relative',
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,
+            boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`
+        }),
+        '@media (forced-colors: active)': {
+            ...shorthands.borderColor('Highlight'),
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: 'Highlight'
+            }
+        }
+    },
+    canvas: {
+        minWidth: '32px',
+        height: '32px'
+    },
+    sidecar: {
+        minWidth: '28px',
+        height: '28px'
+    },
+    notSending: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorBrandBackgroundHover,
+                '@media (forced-colors: active)': {
+                    backgroundColor: 'HighlightText'
+                }
+            },
+            [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {
+                color: tokens.colorNeutralForegroundOnBrand,
+                '@media (forced-colors: active)': {
+                    color: 'Highlight'
+                }
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorBrandBackgroundPressed
+            }
+        }
+    },
+    notSendingDictationActive: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorSubtleBackgroundHover,
+                '@media (forced-colors: active)': {
+                    backgroundColor: 'HighlightText'
+                }
+            },
+            [`& .${sendButtonClassNames.sendIcon}`]: {
+                color: tokens.colorNeutralForeground2Hover,
+                '@media (forced-colors: active)': {
+                    color: 'Highlight'
+                }
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorSubtleBackgroundPressed
+            },
+            [`& .${sendButtonClassNames.sendIcon}`]: {
+                color: tokens.colorNeutralForeground2Pressed
+            }
+        }
+    },
+    sending: {
+        ':hover': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorBrandBackground2Hover,
+                '@media (forced-colors: active)': {
+                    backgroundColor: 'HighlightText'
+                }
+            },
+            [`& .${sendButtonClassNames.stopIcon}`]: {
+                color: tokens.colorBrandForeground2Hover,
+                '@media (forced-colors: active)': {
+                    color: 'Highlight'
+                }
+            }
+        },
+        ':active': {
+            [`& .${sendButtonClassNames.stopBackground}`]: {
+                backgroundColor: tokens.colorBrandBackground2Pressed
+            },
+            [`& .${sendButtonClassNames.stopIcon}`]: {
+                color: tokens.colorBrandForeground2Pressed
+            }
+        }
+    }
+});
+/**
+ * Apply styling to the SendButton slots based on the state
+ */ export const useSendButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;
+    const styles = useStyles();
+    const nextStyles = useNextStyles();
+    const rootNextStyles = useRootNextStyles();
+    const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
+    const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
+    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);
+    if (state.sendIcon) {
+        state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
+    }
+    if (state.stopIcon) {
+        state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
+    }
+    if (state.stopBackground) {
+        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);
+    }
+    // Add style hooks from button
+    useButtonStyles_unstable({
+        ...state,
+        components: {
+            ...state.components,
+            icon: 'span'
+        },
+        iconOnly: false
+    });
+    return state;
+};

package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

package/lib/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SendButton, renderSendButton_unstable, sendButtonClassNames, useSendButtonStyles_unstable, useSendButton_unstable } from './SendButton';

package/lib/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["index.ts"],"sourcesContent":["export type { SendButtonProps, SendButtonSlots, SendButtonState } from './SendButton';\nexport {\n SendButton,\n renderSendButton_unstable,\n sendButtonClassNames,\n useSendButtonStyles_unstable,\n useSendButton_unstable,\n} from './SendButton';\n"],"names":["SendButton","renderSendButton_unstable","sendButtonClassNames","useSendButtonStyles_unstable","useSendButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe"}

package/lib-commonjs/SendButton.js ADDED Viewed

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    SendButton: function() {
+        return _SendButton.SendButton;
+    },
+    renderSendButton_unstable: function() {
+        return _SendButton.renderSendButton_unstable;
+    },
+    sendButtonClassNames: function() {
+        return _SendButton.sendButtonClassNames;
+    },
+    useSendButtonStyles_unstable: function() {
+        return _SendButton.useSendButtonStyles_unstable;
+    },
+    useSendButton_unstable: function() {
+        return _SendButton.useSendButton_unstable;
+    }
+});
+const _SendButton = require("./components/SendButton");

package/lib-commonjs/SendButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["SendButton.ts"],"sourcesContent":["export {\n SendButton,\n renderSendButton_unstable,\n useSendButton_unstable,\n sendButtonClassNames,\n useSendButtonStyles_unstable,\n} from './components/SendButton';\nexport type { SendButtonProps, SendButtonSlots, SendButtonState } from './components/SendButton';\n"],"names":["SendButton","renderSendButton_unstable","sendButtonClassNames","useSendButtonStyles_unstable","useSendButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,UAAU;eAAVA,sBAAU;;IACVC,yBAAyB;eAAzBA,qCAAyB;;IAEzBC,oBAAoB;eAApBA,gCAAoB;;IACpBC,4BAA4B;eAA5BA,wCAA4B;;IAF5BC,sBAAsB;eAAtBA,kCAAsB;;;4BAGjB"}

package/lib-commonjs/components/SendButton/SendButton.js ADDED Viewed

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SendButton", {
+    enumerable: true,
+    get: function() {
+        return SendButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSendButton = require("./useSendButton");
+const _renderSendButton = require("./renderSendButton");
+const _useSendButtonStylesstyles = require("./useSendButtonStyles.styles");
+const SendButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSendButton.useSendButton_unstable)(props, ref);
+    (0, _useSendButtonStylesstyles.useSendButtonStyles_unstable)(state);
+    return (0, _renderSendButton.renderSendButton_unstable)(state);
+});
+SendButton.displayName = 'SendButton';

package/lib-commonjs/components/SendButton/SendButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["SendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSendButton_unstable } from './useSendButton';\nimport { renderSendButton_unstable } from './renderSendButton';\nimport { useSendButtonStyles_unstable } from './useSendButtonStyles.styles';\nimport type { SendButtonProps } from './SendButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// SendButton component - TODO: add more docs\nexport const SendButton: ForwardRefComponent<SendButtonProps> = React.forwardRef((props, ref) => {\n const state = useSendButton_unstable(props, ref);\n\n useSendButtonStyles_unstable(state);\n return renderSendButton_unstable(state);\n});\n\nSendButton.displayName = 'SendButton';\n"],"names":["SendButton","React","forwardRef","props","ref","state","useSendButton_unstable","useSendButtonStyles_unstable","renderSendButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;+BACgB;kCACG;2CACG;AAKtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}

package/lib-commonjs/components/SendButton/SendButton.types.js ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering SendButton
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});