@fluentui-copilot/react-prompt-starter 0.0.0-nightly-20250708-1433-52f2b6b1.1 → 0.0.0-nightly-20250709-0404-150e065c.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.
- package/CHANGELOG.json +3 -3
- package/CHANGELOG.md +4 -4
- package/lib/PromptStarter.js +1 -0
- package/lib/PromptStarterList.js +1 -0
- package/lib/PromptStarterV2.js +1 -0
- package/lib/components/PromptStarter/PromptStarter.js +6 -5
- package/lib/components/PromptStarter/PromptStarter.types.js +2 -1
- package/lib/components/PromptStarter/index.js +1 -0
- package/lib/components/PromptStarter/renderPromptStarter.js +9 -16
- package/lib/components/PromptStarter/usePromptStarter.js +44 -42
- package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.js +6 -5
- package/lib/components/PromptStarterV2/PromptStarter/PromptStarter.types.js +2 -1
- package/lib/components/PromptStarterV2/PromptStarter/index.js +1 -0
- package/lib/components/PromptStarterV2/PromptStarter/promptStarterMotion.js +50 -61
- package/lib/components/PromptStarterV2/PromptStarter/renderPromptStarter.js +9 -15
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarter.js +51 -49
- package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.js +6 -5
- package/lib/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js +2 -1
- package/lib/components/PromptStarterV2/PromptStarterList/index.js +1 -0
- package/lib/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js +14 -15
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js +97 -97
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js +7 -4
- package/lib/contexts/PromptStarterListContext.js +3 -2
- package/lib/index.js +1 -0
- package/lib-commonjs/PromptStarter.js +1 -0
- package/lib-commonjs/PromptStarterList.js +1 -0
- package/lib-commonjs/PromptStarterV2.js +1 -0
- package/lib-commonjs/components/PromptStarter/PromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarter/PromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarter/PromptStarter.types.js +1 -0
- package/lib-commonjs/components/PromptStarter/index.js +1 -0
- package/lib-commonjs/components/PromptStarter/renderPromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarter/renderPromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarter/usePromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarter/usePromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/PromptStarter.types.js +1 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/index.js +1 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/promptStarterMotion.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/promptStarterMotion.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/renderPromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/renderPromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarter.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarter.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/PromptStarterList.types.js +1 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/index.js +1 -0
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/renderPromptStarterList.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterList.js.map +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js +1 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListContextValues.js.map +1 -1
- package/lib-commonjs/contexts/PromptStarterListContext.js +1 -1
- package/lib-commonjs/contexts/PromptStarterListContext.js.map +1 -1
- package/lib-commonjs/index.js +1 -0
- package/package.json +3 -3
- package/lib/components/PromptStarter/usePromptStarterStyles.styles.raw.js +0 -94
- package/lib/components/PromptStarter/usePromptStarterStyles.styles.raw.js.map +0 -1
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js +0 -119
- package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map +0 -1
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js +0 -61
- package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/PromptStarter/usePromptStarterStyles.styles.raw.js +0 -112
- package/lib-commonjs/components/PromptStarter/usePromptStarterStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js +0 -137
- package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js +0 -77
- package/lib-commonjs/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptStarterListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { PromptStarterListContextValue } from '../PromptStarterList';\n\nexport const PromptStarterListContext = createContext<PromptStarterListContextValue | undefined>(undefined);\n\nconst promptStarterListContextDefaultValue: PromptStarterListContextValue = {\n numberOfColumns: 3,\n};\n\nexport const usePromptStarterListContext = <T>(selector: ContextSelector<PromptStarterListContextValue, T>) =>\n useContextSelector(PromptStarterListContext, (ctx = promptStarterListContextDefaultValue) => selector(ctx));\nexport const PromptStarterListProvider = PromptStarterListContext.Provider;\n"],"names":["PromptStarterListContext","PromptStarterListProvider","usePromptStarterListContext","createContext","undefined","promptStarterListContextDefaultValue","numberOfColumns","selector","useContextSelector","ctx","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAQAC,yBAAAA;eAAAA;;IAFAC,2BAAAA;eAAAA;;;sCAVqC;AAI3C,MAAMF,2BAA2BG,IAAAA,mCAAAA,EAAyDC;AAEjG,MAAMC,uCAAsE;
|
|
1
|
+
{"version":3,"sources":["PromptStarterListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { PromptStarterListContextValue } from '../PromptStarterList';\n\nexport const PromptStarterListContext = createContext<PromptStarterListContextValue | undefined>(undefined);\n\nconst promptStarterListContextDefaultValue: PromptStarterListContextValue = {\n numberOfColumns: 3,\n};\n\nexport const usePromptStarterListContext = <T>(selector: ContextSelector<PromptStarterListContextValue, T>) =>\n useContextSelector(PromptStarterListContext, (ctx = promptStarterListContextDefaultValue) => selector(ctx));\nexport const PromptStarterListProvider = PromptStarterListContext.Provider;\n"],"names":["PromptStarterListContext","PromptStarterListProvider","usePromptStarterListContext","createContext","undefined","promptStarterListContextDefaultValue","numberOfColumns","selector","useContextSelector","ctx","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAQAC,yBAAAA;eAAAA;;IAFAC,2BAAAA;eAAAA;;;sCAVqC;AAI3C,MAAMF,2BAA2BG,IAAAA,mCAAAA,EAAyDC;AAEjG,MAAMC,uCAAsE;qBAC1EC;AACF;AAEO,MAAMJ,8BAA8BK,CAAAA,WACzCC,IAAAA,wCAAAA,EAAmBR,0BAA0B,CAACS,MAAMJ,oCAAoC,GAAKE,SAASE;AACjG,MAAMR,4BAA4BD,yBAAyBU,QAAQ"}
|
package/lib-commonjs/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-starter",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20250709-0404-150e065c.1",
|
|
4
4
|
"description": "A Fluent AI package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/tokens": "0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-provider": "0.0.0-nightly-20250709-0404-150e065c.1",
|
|
16
|
+
"@fluentui-copilot/tokens": "0.0.0-nightly-20250709-0404-150e065c.1",
|
|
17
17
|
"@swc/helpers": "^0.5.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { makeStyles, makeResetStyles, mergeClasses, shorthands, typographyStyles, createFocusOutlineStyle } from '@fluentui/react-components';
|
|
2
|
-
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
-
export const promptStarterClassNames = {
|
|
4
|
-
root: 'fai-PromptStarter',
|
|
5
|
-
category: 'fai-PromptStarter__category',
|
|
6
|
-
icon: 'fai-PromptStarter__icon',
|
|
7
|
-
prompt: 'fai-PromptStarter__prompt',
|
|
8
|
-
badge: 'fai-PromptStarter__badge'
|
|
9
|
-
};
|
|
10
|
-
const useRootResetStyles = makeResetStyles({
|
|
11
|
-
position: 'relative',
|
|
12
|
-
display: 'grid',
|
|
13
|
-
gridTemplateColumns: 'auto 1fr',
|
|
14
|
-
gridTemplateRows: 'auto auto',
|
|
15
|
-
gridTemplateAreas: `
|
|
16
|
-
"icon category"
|
|
17
|
-
". prompt"
|
|
18
|
-
`,
|
|
19
|
-
backgroundColor: tokens.colorNeutralBackground1,
|
|
20
|
-
color: tokens.colorNeutralForeground1,
|
|
21
|
-
fontFamily: tokens.fontFamilyBase,
|
|
22
|
-
cursor: 'pointer',
|
|
23
|
-
outlineStyle: 'none',
|
|
24
|
-
textAlign: 'left',
|
|
25
|
-
gap: '0px 8px',
|
|
26
|
-
padding: '6px 8px 8px 8px',
|
|
27
|
-
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
|
|
28
|
-
borderRadius: tokens.borderRadiusMedium,
|
|
29
|
-
'&:hover': {
|
|
30
|
-
backgroundColor: tokens.colorNeutralBackground1Hover,
|
|
31
|
-
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover)
|
|
32
|
-
},
|
|
33
|
-
'&:active': {
|
|
34
|
-
backgroundColor: tokens.colorNeutralBackground1Pressed,
|
|
35
|
-
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed)
|
|
36
|
-
},
|
|
37
|
-
...createFocusOutlineStyle()
|
|
38
|
-
});
|
|
39
|
-
const useStyles = makeStyles({
|
|
40
|
-
disabled: {
|
|
41
|
-
cursor: 'not-allowed',
|
|
42
|
-
backgroundColor: tokens.colorNeutralBackgroundDisabled,
|
|
43
|
-
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),
|
|
44
|
-
'&:hover': {
|
|
45
|
-
backgroundColor: tokens.colorNeutralBackgroundDisabled,
|
|
46
|
-
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled)
|
|
47
|
-
},
|
|
48
|
-
'&:active': {
|
|
49
|
-
backgroundColor: tokens.colorNeutralBackgroundDisabled,
|
|
50
|
-
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled)
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
icon: {
|
|
54
|
-
gridArea: 'icon',
|
|
55
|
-
display: 'flex',
|
|
56
|
-
alignSelf: 'center'
|
|
57
|
-
},
|
|
58
|
-
category: {
|
|
59
|
-
...typographyStyles.body1Strong,
|
|
60
|
-
gridArea: 'category'
|
|
61
|
-
},
|
|
62
|
-
prompt: {
|
|
63
|
-
...typographyStyles.body1,
|
|
64
|
-
gridArea: 'prompt'
|
|
65
|
-
},
|
|
66
|
-
disabledText: {
|
|
67
|
-
color: tokens.colorNeutralForegroundDisabled
|
|
68
|
-
},
|
|
69
|
-
disabledBadge: {
|
|
70
|
-
opacity: '40%'
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
const useNextStyles = makeStyles({
|
|
74
|
-
root: {
|
|
75
|
-
borderRadius: tokens.borderRadiusXLarge
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
export const usePromptStarterStyles_unstable = (state)=>{
|
|
79
|
-
'use no memo';
|
|
80
|
-
const { designVersion } = state;
|
|
81
|
-
const styles = useStyles();
|
|
82
|
-
const nextStyles = useNextStyles();
|
|
83
|
-
const rootResetStyles = useRootResetStyles();
|
|
84
|
-
state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, designVersion === 'next' && nextStyles.root, state.root.disabled && styles.disabled, state.root.className);
|
|
85
|
-
state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, state.root.disabled && styles.disabledText, state.icon.className);
|
|
86
|
-
state.category.className = mergeClasses(promptStarterClassNames.category, styles.category, state.category.className, state.root.disabled && styles.disabledText);
|
|
87
|
-
if (state.prompt) {
|
|
88
|
-
state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.root.disabled && styles.disabledText, state.prompt.className);
|
|
89
|
-
}
|
|
90
|
-
if (state.badge) {
|
|
91
|
-
state.badge.className = mergeClasses(promptStarterClassNames.badge, state.root.disabled && styles.disabledBadge, state.badge.className);
|
|
92
|
-
}
|
|
93
|
-
return state;
|
|
94
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n makeResetStyles,\n mergeClasses,\n shorthands,\n typographyStyles,\n createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n root: 'fai-PromptStarter',\n category: 'fai-PromptStarter__category',\n icon: 'fai-PromptStarter__icon',\n prompt: 'fai-PromptStarter__prompt',\n badge: 'fai-PromptStarter__badge',\n};\n\nconst useRootResetStyles = makeResetStyles({\n position: 'relative',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateRows: 'auto auto',\n gridTemplateAreas: `\n \"icon category\"\n \". prompt\"\n `,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n cursor: 'pointer',\n outlineStyle: 'none',\n textAlign: 'left',\n gap: '0px 8px',\n padding: '6px 8px 8px 8px',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusMedium,\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),\n },\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),\n },\n ...createFocusOutlineStyle(),\n});\n\nconst useStyles = makeStyles({\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n },\n '&:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n },\n },\n icon: { gridArea: 'icon', display: 'flex', alignSelf: 'center' },\n\n category: {\n ...typographyStyles.body1Strong,\n gridArea: 'category',\n },\n prompt: { ...typographyStyles.body1, gridArea: 'prompt' },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n disabledBadge: {\n opacity: '40%',\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootResetStyles = useRootResetStyles();\n state.root.className = mergeClasses(\n promptStarterClassNames.root,\n rootResetStyles,\n designVersion === 'next' && nextStyles.root,\n state.root.disabled && styles.disabled,\n state.root.className,\n );\n state.icon.className = mergeClasses(\n promptStarterClassNames.icon,\n styles.icon,\n state.root.disabled && styles.disabledText,\n state.icon.className,\n );\n state.category.className = mergeClasses(\n promptStarterClassNames.category,\n styles.category,\n state.category.className,\n state.root.disabled && styles.disabledText,\n );\n if (state.prompt) {\n state.prompt.className = mergeClasses(\n promptStarterClassNames.prompt,\n styles.prompt,\n state.root.disabled && styles.disabledText,\n state.prompt.className,\n );\n }\n if (state.badge) {\n state.badge.className = mergeClasses(\n promptStarterClassNames.badge,\n state.root.disabled && styles.disabledBadge,\n state.badge.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","category","icon","prompt","badge","useRootResetStyles","position","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","gap","padding","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","useStyles","disabled","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","gridArea","alignSelf","body1Strong","body1","disabledText","colorNeutralForegroundDisabled","disabledBadge","opacity","useNextStyles","borderRadiusXLarge","usePromptStarterStyles_unstable","state","designVersion","styles","nextStyles","rootResetStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { makeStyles, makeResetStyles, mergeClasses, shorthands, typographyStyles, createFocusOutlineStyle } from '@fluentui/react-components';
|
|
2
|
-
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
-
export const promptStarterClassNames = {
|
|
4
|
-
root: 'fai-PromptStarter',
|
|
5
|
-
primaryAction: 'fai-PromptStarter__primaryAction',
|
|
6
|
-
icon: 'fai-PromptStarter__icon',
|
|
7
|
-
prompt: 'fai-PromptStarter__prompt',
|
|
8
|
-
reasonMarker: 'fai-PromptStarter__reasonMarker',
|
|
9
|
-
actions: 'fai-PromptStarter__actions'
|
|
10
|
-
};
|
|
11
|
-
const useRootResetStyles = makeResetStyles({
|
|
12
|
-
display: 'grid',
|
|
13
|
-
gridTemplateColumns: '1fr auto',
|
|
14
|
-
gridTemplateRows: 'max-content auto',
|
|
15
|
-
minWidth: '214px',
|
|
16
|
-
// Apply styles to the primary action on hover / active states
|
|
17
|
-
'&:hover': {
|
|
18
|
-
[`& .${promptStarterClassNames.primaryAction}`]: {
|
|
19
|
-
boxShadow: tokens.shadow16,
|
|
20
|
-
transform: 'scale(1.03)',
|
|
21
|
-
transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
'&:active': {
|
|
25
|
-
[`& .${promptStarterClassNames.primaryAction}`]: {
|
|
26
|
-
boxShadow: tokens.shadow8,
|
|
27
|
-
transform: 'scale(1.03)',
|
|
28
|
-
transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
// Hide actions when not focused or hovered
|
|
32
|
-
':not(:focus-within):not(:hover)': {
|
|
33
|
-
[`& .${promptStarterClassNames.actions}`]: {
|
|
34
|
-
clip: 'rect(0px, 0px, 0px, 0px)',
|
|
35
|
-
height: '1px',
|
|
36
|
-
margin: '-1px',
|
|
37
|
-
overflow: 'hidden',
|
|
38
|
-
padding: '0px',
|
|
39
|
-
width: '1px',
|
|
40
|
-
position: 'absolute',
|
|
41
|
-
opacity: 0
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
const useStyles = makeStyles({
|
|
46
|
-
primaryAction: {
|
|
47
|
-
gridRow: '1 / 3',
|
|
48
|
-
gridColumn: '1 / 3',
|
|
49
|
-
display: 'flex',
|
|
50
|
-
flexDirection: 'column',
|
|
51
|
-
position: 'relative',
|
|
52
|
-
borderRadius: '28px',
|
|
53
|
-
backgroundColor: tokens.colorNeutralBackground1,
|
|
54
|
-
color: tokens.colorNeutralForeground2,
|
|
55
|
-
fontFamily: tokens.fontFamilyBase,
|
|
56
|
-
cursor: 'pointer',
|
|
57
|
-
outlineStyle: 'none',
|
|
58
|
-
textAlign: 'left',
|
|
59
|
-
rowGap: tokens.spacingHorizontalS,
|
|
60
|
-
padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,
|
|
61
|
-
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
|
|
62
|
-
...createFocusOutlineStyle({
|
|
63
|
-
style: {
|
|
64
|
-
outlineRadius: '28px'
|
|
65
|
-
}
|
|
66
|
-
})
|
|
67
|
-
},
|
|
68
|
-
primaryActionHovered: {
|
|
69
|
-
boxShadow: tokens.shadow16,
|
|
70
|
-
transform: 'scale(1.03)',
|
|
71
|
-
transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`
|
|
72
|
-
},
|
|
73
|
-
icon: {
|
|
74
|
-
display: 'flex',
|
|
75
|
-
alignItems: 'center',
|
|
76
|
-
minHeight: tokens.spacingVerticalXXL
|
|
77
|
-
},
|
|
78
|
-
actions: {
|
|
79
|
-
margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}
|
|
80
|
-
${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,
|
|
81
|
-
position: 'relative',
|
|
82
|
-
gridRow: '1 / 2',
|
|
83
|
-
gridColumn: '2 / 3',
|
|
84
|
-
opacity: 1,
|
|
85
|
-
transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`
|
|
86
|
-
},
|
|
87
|
-
prompt: {
|
|
88
|
-
...typographyStyles.body1Strong,
|
|
89
|
-
// Truncate text after two lines.
|
|
90
|
-
display: '-webkit-box',
|
|
91
|
-
'-webkit-box-orient': 'vertical',
|
|
92
|
-
'-webkit-line-clamp': '2',
|
|
93
|
-
overflowY: 'hidden'
|
|
94
|
-
},
|
|
95
|
-
reasonMarker: {
|
|
96
|
-
...typographyStyles.caption2
|
|
97
|
-
},
|
|
98
|
-
// Hide icon, actions, and reason marker in single column appearance
|
|
99
|
-
singleColumnStyles: {
|
|
100
|
-
display: 'none'
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
export const usePromptStarterStyles_unstable = (state)=>{
|
|
104
|
-
'use no memo';
|
|
105
|
-
const { isSingleColumn } = state;
|
|
106
|
-
const styles = useStyles();
|
|
107
|
-
const rootResetStyles = useRootResetStyles();
|
|
108
|
-
state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);
|
|
109
|
-
state.primaryAction.className = mergeClasses(promptStarterClassNames.primaryAction, styles.primaryAction, state.primaryAction.className);
|
|
110
|
-
state.icon.className = mergeClasses(promptStarterClassNames.icon, styles.icon, isSingleColumn && styles.singleColumnStyles, state.icon.className);
|
|
111
|
-
state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);
|
|
112
|
-
if (state.reasonMarker) {
|
|
113
|
-
state.reasonMarker.className = mergeClasses(promptStarterClassNames.reasonMarker, styles.reasonMarker, isSingleColumn && styles.singleColumnStyles, state.reasonMarker.className);
|
|
114
|
-
}
|
|
115
|
-
if (state.actions) {
|
|
116
|
-
state.actions.className = mergeClasses(promptStarterClassNames.actions, styles.actions, isSingleColumn && styles.singleColumnStyles, state.actions.className);
|
|
117
|
-
}
|
|
118
|
-
return state;
|
|
119
|
-
};
|
package/lib/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n makeResetStyles,\n mergeClasses,\n shorthands,\n typographyStyles,\n createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n root: 'fai-PromptStarter',\n primaryAction: 'fai-PromptStarter__primaryAction',\n icon: 'fai-PromptStarter__icon',\n prompt: 'fai-PromptStarter__prompt',\n reasonMarker: 'fai-PromptStarter__reasonMarker',\n actions: 'fai-PromptStarter__actions',\n};\n\nconst useRootResetStyles = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: '1fr auto',\n gridTemplateRows: 'max-content auto',\n minWidth: '214px',\n\n // Apply styles to the primary action on hover / active states\n '&:hover': {\n [`& .${promptStarterClassNames.primaryAction}`]: {\n boxShadow: tokens.shadow16,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n },\n '&:active': {\n [`& .${promptStarterClassNames.primaryAction}`]: {\n boxShadow: tokens.shadow8,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n },\n\n // Hide actions when not focused or hovered\n ':not(:focus-within):not(:hover)': {\n [`& .${promptStarterClassNames.actions}`]: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n opacity: 0,\n },\n },\n});\n\nconst useStyles = makeStyles({\n primaryAction: {\n gridRow: '1 / 3',\n gridColumn: '1 / 3',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius: '28px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground2,\n fontFamily: tokens.fontFamilyBase,\n cursor: 'pointer',\n outlineStyle: 'none',\n textAlign: 'left',\n rowGap: tokens.spacingHorizontalS,\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n ...createFocusOutlineStyle({ style: { outlineRadius: '28px' } }),\n },\n\n primaryActionHovered: {\n boxShadow: tokens.shadow16,\n transform: 'scale(1.03)',\n transition: `transform ${tokens.durationNormal} ${tokens.curveDecelerateMin}`,\n },\n\n icon: {\n display: 'flex',\n alignItems: 'center',\n minHeight: tokens.spacingVerticalXXL,\n },\n actions: {\n margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}\n ${tokens.spacingVerticalNone} ${tokens.spacingHorizontalNone}`,\n position: 'relative',\n gridRow: '1 / 2',\n gridColumn: '2 / 3',\n\n opacity: 1,\n transition: `opacity ${tokens.durationFast} ${tokens.curveLinear}`,\n },\n prompt: {\n ...typographyStyles.body1Strong,\n\n // Truncate text after two lines.\n display: '-webkit-box',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n overflowY: 'hidden',\n },\n reasonMarker: {\n ...typographyStyles.caption2,\n },\n\n // Hide icon, actions, and reason marker in single column appearance\n singleColumnStyles: {\n display: 'none',\n },\n});\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n 'use no memo';\n\n const { isSingleColumn } = state;\n\n const styles = useStyles();\n const rootResetStyles = useRootResetStyles();\n state.root.className = mergeClasses(promptStarterClassNames.root, rootResetStyles, state.root.className);\n state.primaryAction.className = mergeClasses(\n promptStarterClassNames.primaryAction,\n styles.primaryAction,\n state.primaryAction.className,\n );\n state.icon.className = mergeClasses(\n promptStarterClassNames.icon,\n styles.icon,\n isSingleColumn && styles.singleColumnStyles,\n state.icon.className,\n );\n state.prompt.className = mergeClasses(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);\n if (state.reasonMarker) {\n state.reasonMarker.className = mergeClasses(\n promptStarterClassNames.reasonMarker,\n styles.reasonMarker,\n isSingleColumn && styles.singleColumnStyles,\n state.reasonMarker.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(\n promptStarterClassNames.actions,\n styles.actions,\n isSingleColumn && styles.singleColumnStyles,\n state.actions.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","typographyStyles","createFocusOutlineStyle","tokens","promptStarterClassNames","root","primaryAction","icon","prompt","reasonMarker","actions","useRootResetStyles","display","gridTemplateColumns","gridTemplateRows","minWidth","boxShadow","shadow16","transform","transition","durationNormal","curveDecelerateMin","shadow8","clip","height","margin","overflow","padding","width","position","opacity","useStyles","gridRow","gridColumn","flexDirection","borderRadius","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground2","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","rowGap","spacingHorizontalS","spacingVerticalL","spacingHorizontalL","border","strokeWidthThin","colorNeutralStroke2","style","outlineRadius","primaryActionHovered","alignItems","minHeight","spacingVerticalXXL","spacingVerticalNone","spacingHorizontalNone","durationFast","curveLinear","body1Strong","overflowY","caption2","singleColumnStyles","usePromptStarterStyles_unstable","state","isSingleColumn","styles","rootResetStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib/components/PromptStarterV2/PromptStarterList/usePromptStarterListStyles.styles.raw.js
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
-
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
-
export const promptStarterListClassNames = {
|
|
4
|
-
root: 'fai-PromptStarterList',
|
|
5
|
-
gridWrapper: 'fai-PromptStarterList__gridWrapper',
|
|
6
|
-
expandButton: 'fai-PromptStarterList__expandButton'
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Styles for the root slot
|
|
10
|
-
*/ const useRootClassName = makeResetStyles({
|
|
11
|
-
display: 'flex',
|
|
12
|
-
flexDirection: 'column',
|
|
13
|
-
maxWidth: '772px',
|
|
14
|
-
gap: tokens.spacingHorizontalXL
|
|
15
|
-
});
|
|
16
|
-
const useStyles = makeStyles({
|
|
17
|
-
gridWrapper: {
|
|
18
|
-
display: 'grid',
|
|
19
|
-
gap: tokens.spacingHorizontalL,
|
|
20
|
-
gridAutoColumns: 'max-content',
|
|
21
|
-
gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,
|
|
22
|
-
gridAutoFlow: 'unset'
|
|
23
|
-
},
|
|
24
|
-
expandButton: {
|
|
25
|
-
alignSelf: 'end',
|
|
26
|
-
[`& .${buttonClassNames.icon}`]: {
|
|
27
|
-
fontSize: '12px',
|
|
28
|
-
height: '12px',
|
|
29
|
-
width: '12px'
|
|
30
|
-
},
|
|
31
|
-
':hover': {
|
|
32
|
-
[`& .${buttonClassNames.icon}`]: {
|
|
33
|
-
color: tokens.colorNeutralForeground2Hover
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
':hover:active': {
|
|
37
|
-
[`& .${buttonClassNames.icon}`]: {
|
|
38
|
-
color: tokens.colorNeutralForeground2Pressed
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
expandButtonExpanded: {
|
|
43
|
-
[`& > .${buttonClassNames.icon}`]: {
|
|
44
|
-
transform: 'rotate(180deg)'
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
/**
|
|
49
|
-
* Apply styling to the PromptStarterList slots based on the state
|
|
50
|
-
*/ export const usePromptStarterListStyles_unstable = (state)=>{
|
|
51
|
-
'use no memo';
|
|
52
|
-
const { isExpanded } = state;
|
|
53
|
-
const rootClassName = useRootClassName();
|
|
54
|
-
const styles = useStyles();
|
|
55
|
-
state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);
|
|
56
|
-
state.gridWrapper.className = mergeClasses(promptStarterListClassNames.gridWrapper, styles.gridWrapper, state.gridWrapper.className);
|
|
57
|
-
if (state.expandButton) {
|
|
58
|
-
state.expandButton.className = mergeClasses(promptStarterListClassNames.expandButton, styles.expandButton, isExpanded && styles.expandButtonExpanded, state.expandButton.className);
|
|
59
|
-
}
|
|
60
|
-
return state;
|
|
61
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptStarterListStyles.styles.ts"],"sourcesContent":["import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { PromptStarterListSlots, PromptStarterListState } from './PromptStarterList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nexport const promptStarterListClassNames: SlotClassNames<PromptStarterListSlots> = {\n root: 'fai-PromptStarterList',\n gridWrapper: 'fai-PromptStarterList__gridWrapper',\n expandButton: 'fai-PromptStarterList__expandButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n maxWidth: '772px',\n gap: tokens.spacingHorizontalXL,\n});\n\nconst useStyles = makeStyles({\n gridWrapper: {\n display: 'grid',\n gap: tokens.spacingHorizontalL,\n gridAutoColumns: 'max-content',\n\n gridTemplateColumns: `repeat(auto-fit, minmax(214px, 1fr))`,\n gridAutoFlow: 'unset',\n },\n\n expandButton: {\n alignSelf: 'end',\n [`& .${buttonClassNames.icon}`]: {\n fontSize: '12px',\n height: '12px',\n width: '12px',\n },\n ':hover': {\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':hover:active': {\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n expandButtonExpanded: {\n [`& > .${buttonClassNames.icon}`]: {\n transform: 'rotate(180deg)',\n },\n },\n});\n\n/**\n * Apply styling to the PromptStarterList slots based on the state\n */\nexport const usePromptStarterListStyles_unstable = (state: PromptStarterListState): PromptStarterListState => {\n 'use no memo';\n\n const { isExpanded } = state;\n\n const rootClassName = useRootClassName();\n const styles = useStyles();\n state.root.className = mergeClasses(promptStarterListClassNames.root, rootClassName, state.root.className);\n state.gridWrapper.className = mergeClasses(\n promptStarterListClassNames.gridWrapper,\n styles.gridWrapper,\n state.gridWrapper.className,\n );\n if (state.expandButton) {\n state.expandButton.className = mergeClasses(\n promptStarterListClassNames.expandButton,\n styles.expandButton,\n isExpanded && styles.expandButtonExpanded,\n state.expandButton.className,\n );\n }\n\n return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","tokens","promptStarterListClassNames","root","gridWrapper","expandButton","useRootClassName","display","flexDirection","maxWidth","gap","spacingHorizontalXL","useStyles","spacingHorizontalL","gridAutoColumns","gridTemplateColumns","gridAutoFlow","alignSelf","icon","fontSize","height","width","color","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","expandButtonExpanded","transform","usePromptStarterListStyles_unstable","state","isExpanded","rootClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAGzG,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,aAAa;IACbC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBR,gBAAgB;IACvCS,SAAS;IACTC,eAAe;IACfC,UAAU;IACVC,KAAKT,OAAOU,mBAAmB;AACjC;AAEA,MAAMC,YAAYb,WAAW;IAC3BK,aAAa;QACXG,SAAS;QACTG,KAAKT,OAAOY,kBAAkB;QAC9BC,iBAAiB;QAEjBC,qBAAqB,CAAC,oCAAoC,CAAC;QAC3DC,cAAc;IAChB;IAEAX,cAAc;QACZY,WAAW;QACX,CAAC,CAAC,GAAG,EAAEpB,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/BC,UAAU;YACVC,QAAQ;YACRC,OAAO;QACT;QACA,UAAU;YACR,CAAC,CAAC,GAAG,EAAExB,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOrB,OAAOsB,4BAA4B;YAC5C;QACF;QACA,iBAAiB;YACf,CAAC,CAAC,GAAG,EAAE1B,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC/BI,OAAOrB,OAAOuB,8BAA8B;YAC9C;QACF;IACF;IAEAC,sBAAsB;QACpB,CAAC,CAAC,KAAK,EAAE5B,iBAAiBqB,IAAI,CAAC,CAAC,CAAC,EAAE;YACjCQ,WAAW;QACb;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,gBAAgBxB;IACtB,MAAMyB,SAASnB;IACfgB,MAAMzB,IAAI,CAAC6B,SAAS,GAAGhC,aAAaE,4BAA4BC,IAAI,EAAE2B,eAAeF,MAAMzB,IAAI,CAAC6B,SAAS;IACzGJ,MAAMxB,WAAW,CAAC4B,SAAS,GAAGhC,aAC5BE,4BAA4BE,WAAW,EACvC2B,OAAO3B,WAAW,EAClBwB,MAAMxB,WAAW,CAAC4B,SAAS;IAE7B,IAAIJ,MAAMvB,YAAY,EAAE;QACtBuB,MAAMvB,YAAY,CAAC2B,SAAS,GAAGhC,aAC7BE,4BAA4BG,YAAY,EACxC0B,OAAO1B,YAAY,EACnBwB,cAAcE,OAAON,oBAAoB,EACzCG,MAAMvB,YAAY,CAAC2B,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -1,112 +0,0 @@
|
|
|
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
|
-
promptStarterClassNames: function() {
|
|
13
|
-
return promptStarterClassNames;
|
|
14
|
-
},
|
|
15
|
-
usePromptStarterStyles_unstable: function() {
|
|
16
|
-
return usePromptStarterStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
-
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
-
const promptStarterClassNames = {
|
|
22
|
-
root: 'fai-PromptStarter',
|
|
23
|
-
category: 'fai-PromptStarter__category',
|
|
24
|
-
icon: 'fai-PromptStarter__icon',
|
|
25
|
-
prompt: 'fai-PromptStarter__prompt',
|
|
26
|
-
badge: 'fai-PromptStarter__badge'
|
|
27
|
-
};
|
|
28
|
-
const useRootResetStyles = (0, _reactcomponents.makeResetStyles)({
|
|
29
|
-
position: 'relative',
|
|
30
|
-
display: 'grid',
|
|
31
|
-
gridTemplateColumns: 'auto 1fr',
|
|
32
|
-
gridTemplateRows: 'auto auto',
|
|
33
|
-
gridTemplateAreas: `
|
|
34
|
-
"icon category"
|
|
35
|
-
". prompt"
|
|
36
|
-
`,
|
|
37
|
-
backgroundColor: _tokens.tokens.colorNeutralBackground1,
|
|
38
|
-
color: _tokens.tokens.colorNeutralForeground1,
|
|
39
|
-
fontFamily: _tokens.tokens.fontFamilyBase,
|
|
40
|
-
cursor: 'pointer',
|
|
41
|
-
outlineStyle: 'none',
|
|
42
|
-
textAlign: 'left',
|
|
43
|
-
gap: '0px 8px',
|
|
44
|
-
padding: '6px 8px 8px 8px',
|
|
45
|
-
..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStroke1),
|
|
46
|
-
borderRadius: _tokens.tokens.borderRadiusMedium,
|
|
47
|
-
'&:hover': {
|
|
48
|
-
backgroundColor: _tokens.tokens.colorNeutralBackground1Hover,
|
|
49
|
-
..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStroke1Hover)
|
|
50
|
-
},
|
|
51
|
-
'&:active': {
|
|
52
|
-
backgroundColor: _tokens.tokens.colorNeutralBackground1Pressed,
|
|
53
|
-
..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStroke1Pressed)
|
|
54
|
-
},
|
|
55
|
-
...(0, _reactcomponents.createFocusOutlineStyle)()
|
|
56
|
-
});
|
|
57
|
-
const useStyles = (0, _reactcomponents.makeStyles)({
|
|
58
|
-
disabled: {
|
|
59
|
-
cursor: 'not-allowed',
|
|
60
|
-
backgroundColor: _tokens.tokens.colorNeutralBackgroundDisabled,
|
|
61
|
-
..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStrokeDisabled),
|
|
62
|
-
'&:hover': {
|
|
63
|
-
backgroundColor: _tokens.tokens.colorNeutralBackgroundDisabled,
|
|
64
|
-
..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStrokeDisabled)
|
|
65
|
-
},
|
|
66
|
-
'&:active': {
|
|
67
|
-
backgroundColor: _tokens.tokens.colorNeutralBackgroundDisabled,
|
|
68
|
-
..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStrokeDisabled)
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
icon: {
|
|
72
|
-
gridArea: 'icon',
|
|
73
|
-
display: 'flex',
|
|
74
|
-
alignSelf: 'center'
|
|
75
|
-
},
|
|
76
|
-
category: {
|
|
77
|
-
..._reactcomponents.typographyStyles.body1Strong,
|
|
78
|
-
gridArea: 'category'
|
|
79
|
-
},
|
|
80
|
-
prompt: {
|
|
81
|
-
..._reactcomponents.typographyStyles.body1,
|
|
82
|
-
gridArea: 'prompt'
|
|
83
|
-
},
|
|
84
|
-
disabledText: {
|
|
85
|
-
color: _tokens.tokens.colorNeutralForegroundDisabled
|
|
86
|
-
},
|
|
87
|
-
disabledBadge: {
|
|
88
|
-
opacity: '40%'
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
const useNextStyles = (0, _reactcomponents.makeStyles)({
|
|
92
|
-
root: {
|
|
93
|
-
borderRadius: _tokens.tokens.borderRadiusXLarge
|
|
94
|
-
}
|
|
95
|
-
});
|
|
96
|
-
const usePromptStarterStyles_unstable = (state)=>{
|
|
97
|
-
'use no memo';
|
|
98
|
-
const { designVersion } = state;
|
|
99
|
-
const styles = useStyles();
|
|
100
|
-
const nextStyles = useNextStyles();
|
|
101
|
-
const rootResetStyles = useRootResetStyles();
|
|
102
|
-
state.root.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.root, rootResetStyles, designVersion === 'next' && nextStyles.root, state.root.disabled && styles.disabled, state.root.className);
|
|
103
|
-
state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, state.root.disabled && styles.disabledText, state.icon.className);
|
|
104
|
-
state.category.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.category, styles.category, state.category.className, state.root.disabled && styles.disabledText);
|
|
105
|
-
if (state.prompt) {
|
|
106
|
-
state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, state.root.disabled && styles.disabledText, state.prompt.className);
|
|
107
|
-
}
|
|
108
|
-
if (state.badge) {
|
|
109
|
-
state.badge.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.badge, state.root.disabled && styles.disabledBadge, state.badge.className);
|
|
110
|
-
}
|
|
111
|
-
return state;
|
|
112
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptStarterStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n makeResetStyles,\n mergeClasses,\n shorthands,\n typographyStyles,\n createFocusOutlineStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PromptStarterSlots, PromptStarterState } from './PromptStarter.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptStarterClassNames: SlotClassNames<PromptStarterSlots> = {\n root: 'fai-PromptStarter',\n category: 'fai-PromptStarter__category',\n icon: 'fai-PromptStarter__icon',\n prompt: 'fai-PromptStarter__prompt',\n badge: 'fai-PromptStarter__badge',\n};\n\nconst useRootResetStyles = makeResetStyles({\n position: 'relative',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateRows: 'auto auto',\n gridTemplateAreas: `\n \"icon category\"\n \". prompt\"\n `,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n cursor: 'pointer',\n outlineStyle: 'none',\n textAlign: 'left',\n gap: '0px 8px',\n padding: '6px 8px 8px 8px',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusMedium,\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),\n },\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),\n },\n ...createFocusOutlineStyle(),\n});\n\nconst useStyles = makeStyles({\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n },\n '&:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n },\n },\n icon: { gridArea: 'icon', display: 'flex', alignSelf: 'center' },\n\n category: {\n ...typographyStyles.body1Strong,\n gridArea: 'category',\n },\n prompt: { ...typographyStyles.body1, gridArea: 'prompt' },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n disabledBadge: {\n opacity: '40%',\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\nexport const usePromptStarterStyles_unstable = (state: PromptStarterState): PromptStarterState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootResetStyles = useRootResetStyles();\n state.root.className = mergeClasses(\n promptStarterClassNames.root,\n rootResetStyles,\n designVersion === 'next' && nextStyles.root,\n state.root.disabled && styles.disabled,\n state.root.className,\n );\n state.icon.className = mergeClasses(\n promptStarterClassNames.icon,\n styles.icon,\n state.root.disabled && styles.disabledText,\n state.icon.className,\n );\n state.category.className = mergeClasses(\n promptStarterClassNames.category,\n styles.category,\n state.category.className,\n state.root.disabled && styles.disabledText,\n );\n if (state.prompt) {\n state.prompt.className = mergeClasses(\n promptStarterClassNames.prompt,\n styles.prompt,\n state.root.disabled && styles.disabledText,\n state.prompt.className,\n );\n }\n if (state.badge) {\n state.badge.className = mergeClasses(\n promptStarterClassNames.badge,\n state.root.disabled && styles.disabledBadge,\n state.badge.className,\n );\n }\n\n return state;\n};\n"],"names":["promptStarterClassNames","usePromptStarterStyles_unstable","root","category","icon","prompt","badge","useRootResetStyles","makeResetStyles","position","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","fontFamily","fontFamilyBase","cursor","outlineStyle","textAlign","gap","padding","shorthands","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","createFocusOutlineStyle","useStyles","makeStyles","disabled","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","gridArea","alignSelf","typographyStyles","body1Strong","body1","disabledText","colorNeutralForegroundDisabled","disabledBadge","opacity","useNextStyles","borderRadiusXLarge","state","designVersion","styles","nextStyles","rootResetStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib-commonjs/components/PromptStarterV2/PromptStarter/usePromptStarterStyles.styles.raw.js
DELETED
|
@@ -1,137 +0,0 @@
|
|
|
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
|
-
promptStarterClassNames: function() {
|
|
13
|
-
return promptStarterClassNames;
|
|
14
|
-
},
|
|
15
|
-
usePromptStarterStyles_unstable: function() {
|
|
16
|
-
return usePromptStarterStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
-
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
-
const promptStarterClassNames = {
|
|
22
|
-
root: 'fai-PromptStarter',
|
|
23
|
-
primaryAction: 'fai-PromptStarter__primaryAction',
|
|
24
|
-
icon: 'fai-PromptStarter__icon',
|
|
25
|
-
prompt: 'fai-PromptStarter__prompt',
|
|
26
|
-
reasonMarker: 'fai-PromptStarter__reasonMarker',
|
|
27
|
-
actions: 'fai-PromptStarter__actions'
|
|
28
|
-
};
|
|
29
|
-
const useRootResetStyles = (0, _reactcomponents.makeResetStyles)({
|
|
30
|
-
display: 'grid',
|
|
31
|
-
gridTemplateColumns: '1fr auto',
|
|
32
|
-
gridTemplateRows: 'max-content auto',
|
|
33
|
-
minWidth: '214px',
|
|
34
|
-
// Apply styles to the primary action on hover / active states
|
|
35
|
-
'&:hover': {
|
|
36
|
-
[`& .${promptStarterClassNames.primaryAction}`]: {
|
|
37
|
-
boxShadow: _tokens.tokens.shadow16,
|
|
38
|
-
transform: 'scale(1.03)',
|
|
39
|
-
transition: `transform ${_tokens.tokens.durationNormal} ${_tokens.tokens.curveDecelerateMin}`
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
'&:active': {
|
|
43
|
-
[`& .${promptStarterClassNames.primaryAction}`]: {
|
|
44
|
-
boxShadow: _tokens.tokens.shadow8,
|
|
45
|
-
transform: 'scale(1.03)',
|
|
46
|
-
transition: `transform ${_tokens.tokens.durationNormal} ${_tokens.tokens.curveDecelerateMin}`
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
// Hide actions when not focused or hovered
|
|
50
|
-
':not(:focus-within):not(:hover)': {
|
|
51
|
-
[`& .${promptStarterClassNames.actions}`]: {
|
|
52
|
-
clip: 'rect(0px, 0px, 0px, 0px)',
|
|
53
|
-
height: '1px',
|
|
54
|
-
margin: '-1px',
|
|
55
|
-
overflow: 'hidden',
|
|
56
|
-
padding: '0px',
|
|
57
|
-
width: '1px',
|
|
58
|
-
position: 'absolute',
|
|
59
|
-
opacity: 0
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
const useStyles = (0, _reactcomponents.makeStyles)({
|
|
64
|
-
primaryAction: {
|
|
65
|
-
gridRow: '1 / 3',
|
|
66
|
-
gridColumn: '1 / 3',
|
|
67
|
-
display: 'flex',
|
|
68
|
-
flexDirection: 'column',
|
|
69
|
-
position: 'relative',
|
|
70
|
-
borderRadius: '28px',
|
|
71
|
-
backgroundColor: _tokens.tokens.colorNeutralBackground1,
|
|
72
|
-
color: _tokens.tokens.colorNeutralForeground2,
|
|
73
|
-
fontFamily: _tokens.tokens.fontFamilyBase,
|
|
74
|
-
cursor: 'pointer',
|
|
75
|
-
outlineStyle: 'none',
|
|
76
|
-
textAlign: 'left',
|
|
77
|
-
rowGap: _tokens.tokens.spacingHorizontalS,
|
|
78
|
-
padding: `${_tokens.tokens.spacingVerticalL} ${_tokens.tokens.spacingHorizontalL}`,
|
|
79
|
-
..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStroke2),
|
|
80
|
-
...(0, _reactcomponents.createFocusOutlineStyle)({
|
|
81
|
-
style: {
|
|
82
|
-
outlineRadius: '28px'
|
|
83
|
-
}
|
|
84
|
-
})
|
|
85
|
-
},
|
|
86
|
-
primaryActionHovered: {
|
|
87
|
-
boxShadow: _tokens.tokens.shadow16,
|
|
88
|
-
transform: 'scale(1.03)',
|
|
89
|
-
transition: `transform ${_tokens.tokens.durationNormal} ${_tokens.tokens.curveDecelerateMin}`
|
|
90
|
-
},
|
|
91
|
-
icon: {
|
|
92
|
-
display: 'flex',
|
|
93
|
-
alignItems: 'center',
|
|
94
|
-
minHeight: _tokens.tokens.spacingVerticalXXL
|
|
95
|
-
},
|
|
96
|
-
actions: {
|
|
97
|
-
margin: `${_tokens.tokens.spacingVerticalL} ${_tokens.tokens.spacingHorizontalL}
|
|
98
|
-
${_tokens.tokens.spacingVerticalNone} ${_tokens.tokens.spacingHorizontalNone}`,
|
|
99
|
-
position: 'relative',
|
|
100
|
-
gridRow: '1 / 2',
|
|
101
|
-
gridColumn: '2 / 3',
|
|
102
|
-
opacity: 1,
|
|
103
|
-
transition: `opacity ${_tokens.tokens.durationFast} ${_tokens.tokens.curveLinear}`
|
|
104
|
-
},
|
|
105
|
-
prompt: {
|
|
106
|
-
..._reactcomponents.typographyStyles.body1Strong,
|
|
107
|
-
// Truncate text after two lines.
|
|
108
|
-
display: '-webkit-box',
|
|
109
|
-
'-webkit-box-orient': 'vertical',
|
|
110
|
-
'-webkit-line-clamp': '2',
|
|
111
|
-
overflowY: 'hidden'
|
|
112
|
-
},
|
|
113
|
-
reasonMarker: {
|
|
114
|
-
..._reactcomponents.typographyStyles.caption2
|
|
115
|
-
},
|
|
116
|
-
// Hide icon, actions, and reason marker in single column appearance
|
|
117
|
-
singleColumnStyles: {
|
|
118
|
-
display: 'none'
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
const usePromptStarterStyles_unstable = (state)=>{
|
|
122
|
-
'use no memo';
|
|
123
|
-
const { isSingleColumn } = state;
|
|
124
|
-
const styles = useStyles();
|
|
125
|
-
const rootResetStyles = useRootResetStyles();
|
|
126
|
-
state.root.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.root, rootResetStyles, state.root.className);
|
|
127
|
-
state.primaryAction.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.primaryAction, styles.primaryAction, state.primaryAction.className);
|
|
128
|
-
state.icon.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.icon, styles.icon, isSingleColumn && styles.singleColumnStyles, state.icon.className);
|
|
129
|
-
state.prompt.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.prompt, styles.prompt, state.prompt.className);
|
|
130
|
-
if (state.reasonMarker) {
|
|
131
|
-
state.reasonMarker.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.reasonMarker, styles.reasonMarker, isSingleColumn && styles.singleColumnStyles, state.reasonMarker.className);
|
|
132
|
-
}
|
|
133
|
-
if (state.actions) {
|
|
134
|
-
state.actions.className = (0, _reactcomponents.mergeClasses)(promptStarterClassNames.actions, styles.actions, isSingleColumn && styles.singleColumnStyles, state.actions.className);
|
|
135
|
-
}
|
|
136
|
-
return state;
|
|
137
|
-
};
|