@fluentui/react-radio 9.1.11 → 9.1.13
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +134 -4
- package/CHANGELOG.md +37 -5
- package/lib/components/Radio/Radio.js +3 -6
- package/lib/components/Radio/Radio.js.map +1 -1
- package/lib/components/Radio/index.js +1 -1
- package/lib/components/Radio/index.js.map +1 -1
- package/lib/components/Radio/{useRadioStyles.js → useRadioStyles.styles.js} +1 -1
- package/lib/components/Radio/useRadioStyles.styles.js.map +1 -0
- package/lib/components/RadioGroup/RadioGroup.js +3 -6
- package/lib/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/index.js +1 -1
- package/lib/components/RadioGroup/index.js.map +1 -1
- package/lib/components/RadioGroup/{useRadioGroupStyles.js → useRadioGroupStyles.styles.js} +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.styles.js.map +1 -0
- package/lib-commonjs/components/Radio/Radio.js +3 -4
- package/lib-commonjs/components/Radio/Radio.js.map +1 -1
- package/lib-commonjs/components/Radio/index.js +1 -1
- package/lib-commonjs/components/Radio/index.js.map +1 -1
- package/lib-commonjs/components/Radio/{useRadioStyles.js → useRadioStyles.styles.js} +2 -2
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js.map +1 -0
- package/lib-commonjs/components/RadioGroup/RadioGroup.js +3 -4
- package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/index.js +1 -1
- package/lib-commonjs/components/RadioGroup/index.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/{useRadioGroupStyles.js → useRadioGroupStyles.styles.js} +2 -2
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.js.map +1 -0
- package/package.json +11 -10
- package/.swcrc +0 -30
- package/lib/components/Radio/useRadioStyles.js.map +0 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js.map +0 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +0 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +0 -1
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,137 @@
|
|
2
2
|
"name": "@fluentui/react-radio",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Thu, 18 May 2023 00:35:43 GMT",
|
6
|
+
"tag": "@fluentui/react-radio_v9.1.13",
|
7
|
+
"version": "9.1.13",
|
8
|
+
"comments": {
|
9
|
+
"none": [
|
10
|
+
{
|
11
|
+
"author": "olfedias@microsoft.com",
|
12
|
+
"package": "@fluentui/react-radio",
|
13
|
+
"commit": "06cd515eda59a3078bfe32f9cc7c1f281cd20208",
|
14
|
+
"comment": "chore: add test-ssr script to v9 packages"
|
15
|
+
}
|
16
|
+
],
|
17
|
+
"patch": [
|
18
|
+
{
|
19
|
+
"author": "beachball",
|
20
|
+
"package": "@fluentui/react-radio",
|
21
|
+
"comment": "Bump @fluentui/react-field to v9.1.3",
|
22
|
+
"commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
|
23
|
+
},
|
24
|
+
{
|
25
|
+
"author": "beachball",
|
26
|
+
"package": "@fluentui/react-radio",
|
27
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.4",
|
28
|
+
"commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
|
29
|
+
},
|
30
|
+
{
|
31
|
+
"author": "beachball",
|
32
|
+
"package": "@fluentui/react-radio",
|
33
|
+
"comment": "Bump @fluentui/react-label to v9.1.12",
|
34
|
+
"commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
|
35
|
+
},
|
36
|
+
{
|
37
|
+
"author": "beachball",
|
38
|
+
"package": "@fluentui/react-radio",
|
39
|
+
"comment": "Bump @fluentui/react-tabster to v9.7.1",
|
40
|
+
"commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
|
41
|
+
},
|
42
|
+
{
|
43
|
+
"author": "beachball",
|
44
|
+
"package": "@fluentui/react-radio",
|
45
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.0",
|
46
|
+
"commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
|
47
|
+
}
|
48
|
+
]
|
49
|
+
}
|
50
|
+
},
|
51
|
+
{
|
52
|
+
"date": "Fri, 12 May 2023 20:27:39 GMT",
|
53
|
+
"tag": "@fluentui/react-radio_v9.1.12",
|
54
|
+
"version": "9.1.12",
|
55
|
+
"comments": {
|
56
|
+
"patch": [
|
57
|
+
{
|
58
|
+
"author": "gcox@microsoft.com",
|
59
|
+
"package": "@fluentui/react-radio",
|
60
|
+
"commit": "ee977e20d359922798949a4f18af7a036ca36ca3",
|
61
|
+
"comment": "Update to use single hook selector"
|
62
|
+
},
|
63
|
+
{
|
64
|
+
"author": "olfedias@microsoft.com",
|
65
|
+
"package": "@fluentui/react-radio",
|
66
|
+
"commit": "c28decb23d191a0daaaf6d5d1832429715102129",
|
67
|
+
"comment": "chore: exclude .swcrc from being published"
|
68
|
+
},
|
69
|
+
{
|
70
|
+
"author": "olfedias@microsoft.com",
|
71
|
+
"package": "@fluentui/react-radio",
|
72
|
+
"commit": "871192b67e1bc8a68da1b4c55b4e0ee2aed0b604",
|
73
|
+
"comment": "chore: move makeStyles() calls to .styles.ts files"
|
74
|
+
},
|
75
|
+
{
|
76
|
+
"author": "beachball",
|
77
|
+
"package": "@fluentui/react-radio",
|
78
|
+
"comment": "Bump @fluentui/react-field to v9.1.2",
|
79
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
80
|
+
},
|
81
|
+
{
|
82
|
+
"author": "beachball",
|
83
|
+
"package": "@fluentui/react-radio",
|
84
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3",
|
85
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
86
|
+
},
|
87
|
+
{
|
88
|
+
"author": "beachball",
|
89
|
+
"package": "@fluentui/react-radio",
|
90
|
+
"comment": "Bump @fluentui/react-label to v9.1.11",
|
91
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
92
|
+
},
|
93
|
+
{
|
94
|
+
"author": "beachball",
|
95
|
+
"package": "@fluentui/react-radio",
|
96
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.4.0",
|
97
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
98
|
+
},
|
99
|
+
{
|
100
|
+
"author": "beachball",
|
101
|
+
"package": "@fluentui/react-radio",
|
102
|
+
"comment": "Bump @fluentui/react-tabster to v9.7.0",
|
103
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
104
|
+
},
|
105
|
+
{
|
106
|
+
"author": "beachball",
|
107
|
+
"package": "@fluentui/react-radio",
|
108
|
+
"comment": "Bump @fluentui/react-theme to v9.1.8",
|
109
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
110
|
+
},
|
111
|
+
{
|
112
|
+
"author": "beachball",
|
113
|
+
"package": "@fluentui/react-radio",
|
114
|
+
"comment": "Bump @fluentui/react-utilities to v9.8.1",
|
115
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
116
|
+
},
|
117
|
+
{
|
118
|
+
"author": "beachball",
|
119
|
+
"package": "@fluentui/react-radio",
|
120
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21",
|
121
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
122
|
+
}
|
123
|
+
],
|
124
|
+
"none": [
|
125
|
+
{
|
126
|
+
"author": "martinhochel@microsoft.com",
|
127
|
+
"package": "@fluentui/react-radio",
|
128
|
+
"commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
|
129
|
+
"comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
|
130
|
+
}
|
131
|
+
]
|
132
|
+
}
|
133
|
+
},
|
134
|
+
{
|
135
|
+
"date": "Mon, 24 Apr 2023 08:12:40 GMT",
|
6
136
|
"tag": "@fluentui/react-radio_v9.1.11",
|
7
137
|
"version": "9.1.11",
|
8
138
|
"comments": {
|
@@ -17,19 +147,19 @@
|
|
17
147
|
"author": "beachball",
|
18
148
|
"package": "@fluentui/react-radio",
|
19
149
|
"comment": "Bump @fluentui/react-field to v9.1.1",
|
20
|
-
"commit": "
|
150
|
+
"commit": "505433ac64f144c9cca456097413d6af4582e5ee"
|
21
151
|
},
|
22
152
|
{
|
23
153
|
"author": "beachball",
|
24
154
|
"package": "@fluentui/react-radio",
|
25
155
|
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
|
26
|
-
"commit": "
|
156
|
+
"commit": "505433ac64f144c9cca456097413d6af4582e5ee"
|
27
157
|
},
|
28
158
|
{
|
29
159
|
"author": "beachball",
|
30
160
|
"package": "@fluentui/react-radio",
|
31
161
|
"comment": "Bump @fluentui/react-label to v9.1.10",
|
32
|
-
"commit": "
|
162
|
+
"commit": "505433ac64f144c9cca456097413d6af4582e5ee"
|
33
163
|
}
|
34
164
|
]
|
35
165
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,20 +1,52 @@
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Thu, 18 May 2023 00:35:43 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.1.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.13)
|
8
|
+
|
9
|
+
Thu, 18 May 2023 00:35:43 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.12..@fluentui/react-radio_v9.1.13)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- Bump @fluentui/react-field to v9.1.3 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.4 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
|
16
|
+
- Bump @fluentui/react-label to v9.1.12 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
|
17
|
+
- Bump @fluentui/react-tabster to v9.7.1 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
|
18
|
+
- Bump @fluentui/react-utilities to v9.9.0 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
|
19
|
+
|
20
|
+
## [9.1.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.12)
|
21
|
+
|
22
|
+
Fri, 12 May 2023 20:27:39 GMT
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.11..@fluentui/react-radio_v9.1.12)
|
24
|
+
|
25
|
+
### Patches
|
26
|
+
|
27
|
+
- Update to use single hook selector ([PR #27491](https://github.com/microsoft/fluentui/pull/27491) by gcox@microsoft.com)
|
28
|
+
- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
|
29
|
+
- chore: move makeStyles() calls to .styles.ts files ([PR #27710](https://github.com/microsoft/fluentui/pull/27710) by olfedias@microsoft.com)
|
30
|
+
- Bump @fluentui/react-field to v9.1.2 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
31
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
32
|
+
- Bump @fluentui/react-label to v9.1.11 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
33
|
+
- Bump @fluentui/react-shared-contexts to v9.4.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
34
|
+
- Bump @fluentui/react-tabster to v9.7.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
35
|
+
- Bump @fluentui/react-theme to v9.1.8 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
36
|
+
- Bump @fluentui/react-utilities to v9.8.1 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
37
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
38
|
+
|
7
39
|
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.11)
|
8
40
|
|
9
|
-
Mon, 24 Apr 2023 08:
|
41
|
+
Mon, 24 Apr 2023 08:12:40 GMT
|
10
42
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.10..@fluentui/react-radio_v9.1.11)
|
11
43
|
|
12
44
|
### Patches
|
13
45
|
|
14
46
|
- chore: adopt custom JSX pragma ([PR #27618](https://github.com/microsoft/fluentui/pull/27618) by bernardo.sunderhus@gmail.com)
|
15
|
-
- Bump @fluentui/react-field to v9.1.1 ([
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([
|
17
|
-
- Bump @fluentui/react-label to v9.1.10 ([
|
47
|
+
- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
|
48
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
|
49
|
+
- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
|
18
50
|
|
19
51
|
## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.10)
|
20
52
|
|
@@ -1,18 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { renderRadio_unstable } from './renderRadio';
|
3
3
|
import { useRadio_unstable } from './useRadio';
|
4
|
-
import { useRadioStyles_unstable } from './useRadioStyles';
|
5
|
-
import {
|
4
|
+
import { useRadioStyles_unstable } from './useRadioStyles.styles';
|
5
|
+
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
6
6
|
/**
|
7
7
|
* Radio component is a wrapper for a radio button with a label.
|
8
8
|
*/
|
9
9
|
export const Radio = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
10
|
const state = useRadio_unstable(props, ref);
|
11
11
|
useRadioStyles_unstable(state);
|
12
|
-
|
13
|
-
useRadioStyles_unstable: useCustomStyles
|
14
|
-
} = useCustomStyleHooks_unstable();
|
15
|
-
useCustomStyles(state);
|
12
|
+
useCustomStyleHook_unstable('useRadioStyles_unstable')(state);
|
16
13
|
return renderRadio_unstable(state);
|
17
14
|
});
|
18
15
|
Radio.displayName = 'Radio';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","
|
1
|
+
{"version":3,"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","Radio","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,KAAA,gBAAyCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQP,iBAAA,CAAkBK,KAAA,EAAOC,GAAA;EAEvCL,uBAAA,CAAwBM,KAAA;EAExBL,2BAAA,CAA4B,2BAA2BK,KAAA;EAEvD,OAAOR,oBAAA,CAAqBQ,KAAA;AAC9B;AAEAJ,KAAA,CAAMK,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/Radio/index.ts"],"sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Radio/index.ts"],"sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
@@ -69,4 +69,4 @@ export const useRadioStyles_unstable = state => {
|
|
69
69
|
state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
70
70
|
}
|
71
71
|
};
|
72
|
-
//# sourceMappingURL=useRadioStyles.js.map
|
72
|
+
//# sourceMappingURL=useRadioStyles.styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"sources":["../../../src/components/Radio/useRadioStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n height: '100%',\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const { labelPosition } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootBaseClassName,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputBaseClassName,\n labelPosition === 'below' && inputStyles.below,\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(\n radioClassNames.indicator,\n indicatorBaseClassName,\n state.indicator.className,\n );\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ;AACxC,SAASC,MAAM,QAAQ;AACvB,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ;AAItE,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;EACNC,SAAA,EAAW;EACXC,KAAA,EAAO;EACPC,KAAA,EAAO;AACT;AAEA;AACA,MAAMC,aAAA,GAAgB;AAEtB,MAAMC,oBAAA,gBAAuBV,aAAA,guEAI7B;AAEA,MAAMW,aAAA,gBAAgBV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAKtB;AAEA,MAAMC,qBAAA,gBAAwBhB,aAAA,46GAsF9B;AAEA,MAAMiB,cAAA,gBAAiBhB,QAAA;EAAAiB,KAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,EAKvB;AAEA,MAAMM,yBAAA,gBAA4BrB,aAAA,4lBAiBlC;AAEA;AACA,MAAMsB,cAAA,gBAAiBrB,QAAA;EAAAsB,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAb,KAAA;IAAAO,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,EAmBvB;AAEA;;;AAGA,OAAO,MAAMkB,uBAAA,GAA2BC,KAAA,IAAsB;EAC5D,MAAM;IAAEC;EAAa,CAAE,GAAGD,KAAA;EAE1B,MAAME,iBAAA,GAAoB1B,oBAAA;EAC1B,MAAM2B,UAAA,GAAa1B,aAAA;EACnBuB,KAAA,CAAM7B,IAAI,CAACiC,SAAS,GAAGpC,YAAA,CACrBE,eAAA,CAAgBC,IAAI,EACpB+B,iBAAA,EACAD,aAAA,KAAkB,WAAWE,UAAA,CAAWzB,QAAQ,EAChDsB,KAAA,CAAM7B,IAAI,CAACiC,SAAS;EAGtB,MAAMC,kBAAA,GAAqBvB,qBAAA;EAC3B,MAAMwB,WAAA,GAAcvB,cAAA;EACpBiB,KAAA,CAAM3B,KAAK,CAAC+B,SAAS,GAAGpC,YAAA,CACtBE,eAAA,CAAgBG,KAAK,EACrBgC,kBAAA,EACAJ,aAAA,KAAkB,WAAWK,WAAA,CAAYtB,KAAK,EAC9CgB,KAAA,CAAM3B,KAAK,CAAC+B,SAAS;EAGvB,MAAMG,sBAAA,GAAyBpB,yBAAA;EAC/Ba,KAAA,CAAM5B,SAAS,CAACgC,SAAS,GAAGpC,YAAA,CAC1BE,eAAA,CAAgBE,SAAS,EACzBmC,sBAAA,EACAP,KAAA,CAAM5B,SAAS,CAACgC,SAAS;EAG3B,MAAMI,WAAA,GAAcpB,cAAA;EACpB,IAAIY,KAAA,CAAM1B,KAAK,EAAE;IACf0B,KAAA,CAAM1B,KAAK,CAAC8B,SAAS,GAAGpC,YAAA,CACtBE,eAAA,CAAgBI,KAAK,EACrBkC,WAAA,CAAYnB,IAAI,EAChBmB,WAAW,CAACP,aAAA,CAAc,EAC1BD,KAAA,CAAM1B,KAAK,CAAC8B,SAAS;EAEzB;AACF"}
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { renderRadioGroup_unstable } from './renderRadioGroup';
|
3
3
|
import { useRadioGroup_unstable } from './useRadioGroup';
|
4
|
-
import { useRadioGroupStyles_unstable } from './useRadioGroupStyles';
|
4
|
+
import { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';
|
5
5
|
import { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';
|
6
|
-
import {
|
6
|
+
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
7
7
|
/**
|
8
8
|
* A RadioGroup component presents a set of options where only one option can be selected.
|
9
9
|
*/
|
@@ -11,10 +11,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
11
11
|
const state = useRadioGroup_unstable(props, ref);
|
12
12
|
const contextValues = useRadioGroupContextValues(state);
|
13
13
|
useRadioGroupStyles_unstable(state);
|
14
|
-
|
15
|
-
useRadioGroupStyles_unstable: useCustomStyles
|
16
|
-
} = useCustomStyleHooks_unstable();
|
17
|
-
useCustomStyles(state);
|
14
|
+
useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);
|
18
15
|
return renderRadioGroup_unstable(state, contextValues);
|
19
16
|
});
|
20
17
|
RadioGroup.displayName = 'RadioGroup';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","
|
1
|
+
{"version":3,"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,UAAA,gBAAmDN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQR,sBAAA,CAAuBM,KAAA,EAAOC,GAAA;EAC5C,MAAME,aAAA,GAAgBP,0BAAA,CAA2BM,KAAA;EAEjDP,4BAAA,CAA6BO,KAAA;EAE7BL,2BAAA,CAA4B,gCAAgCK,KAAA;EAE5D,OAAOT,yBAAA,CAA0BS,KAAA,EAAOC,aAAA;AAC1C;AAEAL,UAAA,CAAWM,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/RadioGroup/index.ts"],"sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/RadioGroup/index.ts"],"sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
@@ -20,4 +20,4 @@ export const useRadioGroupStyles_unstable = state => {
|
|
20
20
|
const styles = useStyles();
|
21
21
|
state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
22
22
|
};
|
23
|
-
//# sourceMappingURL=useRadioGroupStyles.js.map
|
23
|
+
//# sourceMappingURL=useRadioGroupStyles.styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"sources":["../../../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AAIzC,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EASlB;AAEA;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA2B;EACtE,MAAMC,MAAA,GAASR,SAAA;EACfO,KAAA,CAAMR,IAAI,CAACU,SAAS,GAAGZ,YAAA,CACrBC,oBAAA,CAAqBC,IAAI,EACzBS,MAAA,CAAOT,IAAI,EACXQ,KAAA,CAAMG,MAAM,KAAK,cAAcF,MAAA,CAAOL,QAAQ,EAC9CI,KAAA,CAAMR,IAAI,CAACU,SAAS;AAExB"}
|
@@ -10,13 +10,12 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
|
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
11
|
const _renderRadio = require("./renderRadio");
|
12
12
|
const _useRadio = require("./useRadio");
|
13
|
-
const
|
13
|
+
const _useRadioStylesStyles = require("./useRadioStyles.styles");
|
14
14
|
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
15
15
|
const Radio = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
16
16
|
const state = (0, _useRadio.useRadio_unstable)(props, ref);
|
17
|
-
(0,
|
18
|
-
|
19
|
-
useCustomStyles(state);
|
17
|
+
(0, _useRadioStylesStyles.useRadioStyles_unstable)(state);
|
18
|
+
(0, _reactSharedContexts.useCustomStyleHook_unstable)('useRadioStyles_unstable')(state);
|
20
19
|
return (0, _renderRadio.renderRadio_unstable)(state);
|
21
20
|
});
|
22
21
|
Radio.displayName = 'Radio'; //# sourceMappingURL=Radio.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Radio/Radio.js"],"sourcesContent":["import * as React from 'react';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles';\nimport {
|
1
|
+
{"version":3,"sources":["../../../lib/components/Radio/Radio.js"],"sourcesContent":["import * as React from 'react';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n useRadioStyles_unstable(state);\n useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n return renderRadio_unstable(state);\n});\nRadio.displayName = 'Radio';\n//# sourceMappingURL=Radio.js.map"],"names":["Radio","React","forwardRef","props","ref","state","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","renderRadio_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACc;0BACH;sCACM;qCACI;AAIrC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,6CAAuB,EAACF;IACxBG,IAAAA,gDAA2B,EAAC,2BAA2BH;IACvD,OAAOI,IAAAA,iCAAoB,EAACJ;AAC9B;AACAL,MAAMU,WAAW,GAAG,SACpB,iCAAiC"}
|
@@ -7,7 +7,7 @@ _exportStar(require("./Radio"), exports);
|
|
7
7
|
_exportStar(require("./Radio.types"), exports);
|
8
8
|
_exportStar(require("./renderRadio"), exports);
|
9
9
|
_exportStar(require("./useRadio"), exports);
|
10
|
-
_exportStar(require("./useRadioStyles"), exports);
|
10
|
+
_exportStar(require("./useRadioStyles.styles"), exports);
|
11
11
|
//# sourceMappingURL=index.js.map
|
12
12
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Radio/index.js"],"sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
1
|
+
{"version":3,"sources":["../../../lib/components/Radio/index.js"],"sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
@@ -148,6 +148,6 @@ const useRadioStyles_unstable = (state)=>{
|
|
148
148
|
if (state.label) {
|
149
149
|
state.label.className = (0, _react.mergeClasses)(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
150
150
|
}
|
151
|
-
}; //# sourceMappingURL=useRadioStyles.js.map
|
151
|
+
}; //# sourceMappingURL=useRadioStyles.styles.js.map
|
152
152
|
|
153
|
-
//# sourceMappingURL=useRadioStyles.js.map
|
153
|
+
//# sourceMappingURL=useRadioStyles.styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Radio/useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const radioClassNames = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r18vxbm9\", \"r1631i6s\", [\".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r18vxbm9:focus{outline-style:none;}\", \".r18vxbm9:focus-visible{outline-style:none;}\", \".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}\", \".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r1631i6s:focus{outline-style:none;}\", \".r1631i6s:focus-visible{outline-style:none;}\", \".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1631i6s[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n Bt984gj: \"f122n59\"\n }\n}, {\n d: [\".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"r9gx1vl\", \"r1uk1i2c\", [\".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r9gx1vl:enabled{cursor:pointer;}\", \".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}\", \".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r1uk1i2c:enabled{cursor:pointer;}\", \".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}\", \".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n below: {\n a9b677: \"fly5x3f\",\n Bqenvij: \"f1je6zif\"\n }\n}, {\n d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rid4516\", null, [\".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}\"]);\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"],\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n below: {\n z8tnut: \"f1ywm7hm\",\n fsow6f: \"f17mccla\"\n }\n}, {\n d: [\".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f17mccla{text-align:center;}\"]\n});\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = state => {\n const {\n labelPosition\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n};\n//# sourceMappingURL=useRadioStyles.styles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"mappings":"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"}
|
@@ -10,15 +10,14 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
|
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
11
|
const _renderRadioGroup = require("./renderRadioGroup");
|
12
12
|
const _useRadioGroup = require("./useRadioGroup");
|
13
|
-
const
|
13
|
+
const _useRadioGroupStylesStyles = require("./useRadioGroupStyles.styles");
|
14
14
|
const _useRadioGroupContextValues = require("../../contexts/useRadioGroupContextValues");
|
15
15
|
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
16
16
|
const RadioGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
17
17
|
const state = (0, _useRadioGroup.useRadioGroup_unstable)(props, ref);
|
18
18
|
const contextValues = (0, _useRadioGroupContextValues.useRadioGroupContextValues)(state);
|
19
|
-
(0,
|
20
|
-
|
21
|
-
useCustomStyles(state);
|
19
|
+
(0, _useRadioGroupStylesStyles.useRadioGroupStyles_unstable)(state);
|
20
|
+
(0, _reactSharedContexts.useCustomStyleHook_unstable)('useRadioGroupStyles_unstable')(state);
|
22
21
|
return (0, _renderRadioGroup.renderRadioGroup_unstable)(state, contextValues);
|
23
22
|
});
|
24
23
|
RadioGroup.displayName = 'RadioGroup'; //# sourceMappingURL=RadioGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/RadioGroup/RadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport {
|
1
|
+
{"version":3,"sources":["../../../lib/components/RadioGroup/RadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n useRadioGroupStyles_unstable(state);\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n return renderRadioGroup_unstable(state, contextValues);\n});\nRadioGroup.displayName = 'RadioGroup';\n//# sourceMappingURL=RadioGroup.js.map"],"names":["RadioGroup","React","forwardRef","props","ref","state","useRadioGroup_unstable","contextValues","useRadioGroupContextValues","useRadioGroupStyles_unstable","useCustomStyleHook_unstable","renderRadioGroup_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;kCACmB;+BACH;2CACM;4CACF;qCACC;AAIrC,MAAMA,aAAa,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACtE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5C,MAAMG,gBAAgBC,IAAAA,sDAA0B,EAACH;IACjDI,IAAAA,uDAA4B,EAACJ;IAC7BK,IAAAA,gDAA2B,EAAC,gCAAgCL;IAC5D,OAAOM,IAAAA,2CAAyB,EAACN,OAAOE;AAC1C;AACAP,WAAWY,WAAW,GAAG,cACzB,sCAAsC"}
|
@@ -7,7 +7,7 @@ _exportStar(require("./RadioGroup"), exports);
|
|
7
7
|
_exportStar(require("./RadioGroup.types"), exports);
|
8
8
|
_exportStar(require("./renderRadioGroup"), exports);
|
9
9
|
_exportStar(require("./useRadioGroup"), exports);
|
10
|
-
_exportStar(require("./useRadioGroupStyles"), exports);
|
10
|
+
_exportStar(require("./useRadioGroupStyles.styles"), exports);
|
11
11
|
//# sourceMappingURL=index.js.map
|
12
12
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/RadioGroup/index.js"],"sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
1
|
+
{"version":3,"sources":["../../../lib/components/RadioGroup/index.js"],"sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
package/lib-commonjs/components/RadioGroup/{useRadioGroupStyles.js → useRadioGroupStyles.styles.js}
RENAMED
@@ -34,6 +34,6 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
34
34
|
const useRadioGroupStyles_unstable = (state)=>{
|
35
35
|
const styles = useStyles();
|
36
36
|
state.root.className = (0, _react.mergeClasses)(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
37
|
-
}; //# sourceMappingURL=useRadioGroupStyles.js.map
|
37
|
+
}; //# sourceMappingURL=useRadioGroupStyles.styles.js.map
|
38
38
|
|
39
|
-
//# sourceMappingURL=useRadioGroupStyles.js.map
|
39
|
+
//# sourceMappingURL=useRadioGroupStyles.styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/RadioGroup/useRadioGroupStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n root: 'fui-RadioGroup'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f6jr5hl\"\n },\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\"]\n});\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n};\n//# sourceMappingURL=useRadioGroupStyles.styles.js.map"],"names":["radioGroupClassNames","useRadioGroupStyles_unstable","root","useStyles","__styles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","state","styles","className","mergeClasses","layout"],"mappings":";;;;;;;;;;;IACaA,oBAAoB,MAApBA;IAiBAC,4BAA4B,MAA5BA;;uBAlB0B;AAChC,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;IACX;IACAC,UAAU;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA2H;KAA4F;AACrT;AAIO,MAAMR,+BAA+BS,CAAAA,QAAS;IACnD,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBE,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMI,MAAM,KAAK,cAAcH,OAAOJ,QAAQ,EAAEG,MAAMR,IAAI,CAACU,SAAS;AAClJ,GACA,sDAAsD"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-radio",
|
3
|
-
"version": "9.1.
|
3
|
+
"version": "9.1.13",
|
4
4
|
"description": "Fluent UI Radio component",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -22,24 +22,25 @@
|
|
22
22
|
"test": "jest --passWithNoTests",
|
23
23
|
"storybook": "start-storybook",
|
24
24
|
"type-check": "tsc -b tsconfig.json",
|
25
|
-
"generate-api": "just-scripts generate-api"
|
25
|
+
"generate-api": "just-scripts generate-api",
|
26
|
+
"test-ssr": "test-ssr ./stories/**/*.stories.tsx"
|
26
27
|
},
|
27
28
|
"devDependencies": {
|
28
29
|
"@fluentui/eslint-plugin": "*",
|
29
30
|
"@fluentui/react-conformance": "*",
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.21",
|
31
32
|
"@fluentui/scripts-api-extractor": "*",
|
32
33
|
"@fluentui/scripts-tasks": "*"
|
33
34
|
},
|
34
35
|
"dependencies": {
|
35
|
-
"@fluentui/react-field": "^9.1.
|
36
|
+
"@fluentui/react-field": "^9.1.3",
|
36
37
|
"@fluentui/react-icons": "^2.0.196",
|
37
|
-
"@fluentui/react-jsx-runtime": "9.0.0-alpha.
|
38
|
-
"@fluentui/react-label": "^9.1.
|
39
|
-
"@fluentui/react-shared-contexts": "^9.
|
40
|
-
"@fluentui/react-tabster": "^9.
|
41
|
-
"@fluentui/react-theme": "^9.1.
|
42
|
-
"@fluentui/react-utilities": "^9.
|
38
|
+
"@fluentui/react-jsx-runtime": "9.0.0-alpha.4",
|
39
|
+
"@fluentui/react-label": "^9.1.12",
|
40
|
+
"@fluentui/react-shared-contexts": "^9.4.0",
|
41
|
+
"@fluentui/react-tabster": "^9.7.1",
|
42
|
+
"@fluentui/react-theme": "^9.1.8",
|
43
|
+
"@fluentui/react-utilities": "^9.9.0",
|
43
44
|
"@griffel/react": "^1.5.2",
|
44
45
|
"@swc/helpers": "^0.4.14"
|
45
46
|
},
|
package/.swcrc
DELETED
@@ -1,30 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"$schema": "https://json.schemastore.org/swcrc",
|
3
|
-
"exclude": [
|
4
|
-
"/testing",
|
5
|
-
"/**/*.cy.ts",
|
6
|
-
"/**/*.cy.tsx",
|
7
|
-
"/**/*.spec.ts",
|
8
|
-
"/**/*.spec.tsx",
|
9
|
-
"/**/*.test.ts",
|
10
|
-
"/**/*.test.tsx"
|
11
|
-
],
|
12
|
-
"jsc": {
|
13
|
-
"parser": {
|
14
|
-
"syntax": "typescript",
|
15
|
-
"tsx": true,
|
16
|
-
"decorators": false,
|
17
|
-
"dynamicImport": false
|
18
|
-
},
|
19
|
-
"externalHelpers": true,
|
20
|
-
"transform": {
|
21
|
-
"react": {
|
22
|
-
"runtime": "classic",
|
23
|
-
"useSpread": true
|
24
|
-
}
|
25
|
-
},
|
26
|
-
"target": "es2019"
|
27
|
-
},
|
28
|
-
"minify": false,
|
29
|
-
"sourceMaps": true
|
30
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"sources":["../../../src/components/Radio/useRadioStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n height: '100%',\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const { labelPosition } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootBaseClassName,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputBaseClassName,\n labelPosition === 'below' && inputStyles.below,\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(\n radioClassNames.indicator,\n indicatorBaseClassName,\n state.indicator.className,\n );\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ;AACxC,SAASC,MAAM,QAAQ;AACvB,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ;AAItE,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;EACNC,SAAA,EAAW;EACXC,KAAA,EAAO;EACPC,KAAA,EAAO;AACT;AAEA;AACA,MAAMC,aAAA,GAAgB;AAEtB,MAAMC,oBAAA,gBAAuBV,aAAA,guEAI7B;AAEA,MAAMW,aAAA,gBAAgBV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAKtB;AAEA,MAAMC,qBAAA,gBAAwBhB,aAAA,46GAsF9B;AAEA,MAAMiB,cAAA,gBAAiBhB,QAAA;EAAAiB,KAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,EAKvB;AAEA,MAAMM,yBAAA,gBAA4BrB,aAAA,4lBAiBlC;AAEA;AACA,MAAMsB,cAAA,gBAAiBrB,QAAA;EAAAsB,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAb,KAAA;IAAAO,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,EAmBvB;AAEA;;;AAGA,OAAO,MAAMkB,uBAAA,GAA2BC,KAAA,IAAsB;EAC5D,MAAM;IAAEC;EAAa,CAAE,GAAGD,KAAA;EAE1B,MAAME,iBAAA,GAAoB1B,oBAAA;EAC1B,MAAM2B,UAAA,GAAa1B,aAAA;EACnBuB,KAAA,CAAM7B,IAAI,CAACiC,SAAS,GAAGpC,YAAA,CACrBE,eAAA,CAAgBC,IAAI,EACpB+B,iBAAA,EACAD,aAAA,KAAkB,WAAWE,UAAA,CAAWzB,QAAQ,EAChDsB,KAAA,CAAM7B,IAAI,CAACiC,SAAS;EAGtB,MAAMC,kBAAA,GAAqBvB,qBAAA;EAC3B,MAAMwB,WAAA,GAAcvB,cAAA;EACpBiB,KAAA,CAAM3B,KAAK,CAAC+B,SAAS,GAAGpC,YAAA,CACtBE,eAAA,CAAgBG,KAAK,EACrBgC,kBAAA,EACAJ,aAAA,KAAkB,WAAWK,WAAA,CAAYtB,KAAK,EAC9CgB,KAAA,CAAM3B,KAAK,CAAC+B,SAAS;EAGvB,MAAMG,sBAAA,GAAyBpB,yBAAA;EAC/Ba,KAAA,CAAM5B,SAAS,CAACgC,SAAS,GAAGpC,YAAA,CAC1BE,eAAA,CAAgBE,SAAS,EACzBmC,sBAAA,EACAP,KAAA,CAAM5B,SAAS,CAACgC,SAAS;EAG3B,MAAMI,WAAA,GAAcpB,cAAA;EACpB,IAAIY,KAAA,CAAM1B,KAAK,EAAE;IACf0B,KAAA,CAAM1B,KAAK,CAAC8B,SAAS,GAAGpC,YAAA,CACtBE,eAAA,CAAgBI,KAAK,EACrBkC,WAAA,CAAYnB,IAAI,EAChBmB,WAAW,CAACP,aAAA,CAAc,EAC1BD,KAAA,CAAM1B,KAAK,CAAC8B,SAAS;EAEzB;AACF"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"sources":["../../../src/components/RadioGroup/useRadioGroupStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AAIzC,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EASlB;AAEA;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA2B;EACtE,MAAMC,MAAA,GAASR,SAAA;EACfO,KAAA,CAAMR,IAAI,CAACU,SAAS,GAAGZ,YAAA,CACrBC,oBAAA,CAAqBC,IAAI,EACzBS,MAAA,CAAOT,IAAI,EACXQ,KAAA,CAAMG,MAAM,KAAK,cAAcF,MAAA,CAAOL,QAAQ,EAC9CI,KAAA,CAAMR,IAAI,CAACU,SAAS;AAExB"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Radio/useRadioStyles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const radioClassNames = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r18vxbm9\", \"r1631i6s\", [\".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r18vxbm9:focus{outline-style:none;}\", \".r18vxbm9:focus-visible{outline-style:none;}\", \".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}\", \".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r1631i6s:focus{outline-style:none;}\", \".r1631i6s:focus-visible{outline-style:none;}\", \".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1631i6s[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n Bt984gj: \"f122n59\"\n }\n}, {\n d: [\".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"r9gx1vl\", \"r1uk1i2c\", [\".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r9gx1vl:enabled{cursor:pointer;}\", \".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}\", \".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r1uk1i2c:enabled{cursor:pointer;}\", \".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}\", \".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n below: {\n a9b677: \"fly5x3f\",\n Bqenvij: \"f1je6zif\"\n }\n}, {\n d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rid4516\", null, [\".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}\"]);\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"],\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n below: {\n z8tnut: \"f1ywm7hm\",\n fsow6f: \"f17mccla\"\n }\n}, {\n d: [\".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f17mccla{text-align:center;}\"]\n});\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = state => {\n const {\n labelPosition\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n};\n//# sourceMappingURL=useRadioStyles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/RadioGroup/useRadioGroupStyles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n root: 'fui-RadioGroup'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f6jr5hl\"\n },\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\"]\n});\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n};\n//# sourceMappingURL=useRadioGroupStyles.js.map"],"names":["radioGroupClassNames","useRadioGroupStyles_unstable","root","useStyles","__styles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","state","styles","className","mergeClasses","layout"],"mappings":";;;;;;;;;;;IACaA,oBAAoB,MAApBA;IAiBAC,4BAA4B,MAA5BA;;uBAlB0B;AAChC,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;IACX;IACAC,UAAU;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA2H;KAA4F;AACrT;AAIO,MAAMR,+BAA+BS,CAAAA,QAAS;IACnD,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBE,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMI,MAAM,KAAK,cAAcH,OAAOJ,QAAQ,EAAEG,MAAMR,IAAI,CAACU,SAAS;AAClJ,GACA,+CAA+C"}
|