@fluentui/react-divider 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0
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.md +29 -9
- package/README.md +11 -0
- package/lib/components/Divider/Divider.js.map +1 -1
- package/lib/components/Divider/Divider.module.css +250 -0
- package/lib/components/Divider/Divider.types.js.map +1 -1
- package/lib/components/Divider/index.js.map +1 -1
- package/lib/components/Divider/renderDivider.js +2 -2
- package/lib/components/Divider/renderDivider.js.map +1 -1
- package/lib/components/Divider/useDivider.js.map +1 -1
- package/lib/components/Divider/useDividerStyles.styles.css.js +13 -0
- package/lib/components/Divider/useDividerStyles.styles.css.js.map +1 -0
- package/lib/components/Divider/useDividerStyles.styles.raw.css.js +13 -0
- package/lib/components/Divider/useDividerStyles.styles.raw.css.js.map +1 -0
- package/lib/components/Divider/useDividerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/Divider.cjs +7 -7
- package/lib-commonjs/components/Divider/Divider.cjs.map +1 -1
- package/lib-commonjs/components/Divider/Divider.module.css +250 -0
- package/lib-commonjs/components/Divider/Divider.types.cjs.map +1 -1
- package/lib-commonjs/components/Divider/index.cjs +7 -7
- package/lib-commonjs/components/Divider/index.cjs.map +1 -1
- package/lib-commonjs/components/Divider/renderDivider.cjs.map +1 -1
- package/lib-commonjs/components/Divider/useDivider.cjs +3 -3
- package/lib-commonjs/components/Divider/useDivider.cjs.map +1 -1
- package/lib-commonjs/components/Divider/useDividerStyles.styles.cjs +3 -3
- package/lib-commonjs/components/Divider/useDividerStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/Divider/useDividerStyles.styles.css.cjs +32 -0
- package/lib-commonjs/components/Divider/useDividerStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/Divider/useDividerStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/Divider/useDividerStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/Divider/useDividerStyles.styles.raw.css.cjs +32 -0
- package/lib-commonjs/components/Divider/useDividerStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/index.cjs +7 -7
- package/package.json +12 -12
- package/dist/metadata/api/api-root.json +0 -1
- package/dist/metadata/index.json +0 -1
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
@layer fluentui {
|
|
2
|
+
.root {
|
|
3
|
+
align-items: center;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: row;
|
|
7
|
+
flex-grow: 1;
|
|
8
|
+
position: relative;
|
|
9
|
+
font-family: var(--fontFamilyBase);
|
|
10
|
+
font-size: var(--fontSizeBase200);
|
|
11
|
+
font-weight: var(--fontWeightRegular);
|
|
12
|
+
line-height: var(--lineHeightBase200);
|
|
13
|
+
text-align: center;
|
|
14
|
+
&::before {
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-grow: 1;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&::after {
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-grow: 1;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.root:where(.start) {
|
|
28
|
+
&::after {
|
|
29
|
+
content: '';
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.root:where(.center) {
|
|
34
|
+
&::before {
|
|
35
|
+
content: '';
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&::after {
|
|
39
|
+
content: '';
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.root:where(.end) {
|
|
44
|
+
&::before {
|
|
45
|
+
content: '';
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.root:where(.brand) {
|
|
50
|
+
color: var(--colorBrandForeground1);
|
|
51
|
+
&::before {
|
|
52
|
+
border-top-color: var(--colorBrandStroke1);
|
|
53
|
+
border-right-color: var(--colorBrandStroke1);
|
|
54
|
+
border-bottom-color: var(--colorBrandStroke1);
|
|
55
|
+
border-left-color: var(--colorBrandStroke1);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&::after {
|
|
59
|
+
border-top-color: var(--colorBrandStroke1);
|
|
60
|
+
border-right-color: var(--colorBrandStroke1);
|
|
61
|
+
border-bottom-color: var(--colorBrandStroke1);
|
|
62
|
+
border-left-color: var(--colorBrandStroke1);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.root:where(.default) {
|
|
67
|
+
color: var(--colorNeutralForeground2);
|
|
68
|
+
&::before {
|
|
69
|
+
border-top-color: var(--colorNeutralStroke2);
|
|
70
|
+
border-right-color: var(--colorNeutralStroke2);
|
|
71
|
+
border-bottom-color: var(--colorNeutralStroke2);
|
|
72
|
+
border-left-color: var(--colorNeutralStroke2);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&::after {
|
|
76
|
+
border-top-color: var(--colorNeutralStroke2);
|
|
77
|
+
border-right-color: var(--colorNeutralStroke2);
|
|
78
|
+
border-bottom-color: var(--colorNeutralStroke2);
|
|
79
|
+
border-left-color: var(--colorNeutralStroke2);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.root:where(.subtle) {
|
|
84
|
+
color: var(--colorNeutralForeground3);
|
|
85
|
+
&::before {
|
|
86
|
+
border-top-color: var(--colorNeutralStroke3);
|
|
87
|
+
border-right-color: var(--colorNeutralStroke3);
|
|
88
|
+
border-bottom-color: var(--colorNeutralStroke3);
|
|
89
|
+
border-left-color: var(--colorNeutralStroke3);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&::after {
|
|
93
|
+
border-top-color: var(--colorNeutralStroke3);
|
|
94
|
+
border-right-color: var(--colorNeutralStroke3);
|
|
95
|
+
border-bottom-color: var(--colorNeutralStroke3);
|
|
96
|
+
border-left-color: var(--colorNeutralStroke3);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.root:where(.strong) {
|
|
101
|
+
color: var(--colorNeutralForeground1);
|
|
102
|
+
&::before {
|
|
103
|
+
border-top-color: var(--colorNeutralStroke1);
|
|
104
|
+
border-right-color: var(--colorNeutralStroke1);
|
|
105
|
+
border-bottom-color: var(--colorNeutralStroke1);
|
|
106
|
+
border-left-color: var(--colorNeutralStroke1);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&::after {
|
|
110
|
+
border-top-color: var(--colorNeutralStroke1);
|
|
111
|
+
border-right-color: var(--colorNeutralStroke1);
|
|
112
|
+
border-bottom-color: var(--colorNeutralStroke1);
|
|
113
|
+
border-left-color: var(--colorNeutralStroke1);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.root:where(.horizontal) {
|
|
118
|
+
width: 100%;
|
|
119
|
+
&::before {
|
|
120
|
+
border-top-style: solid;
|
|
121
|
+
border-top-width: var(--strokeWidthThin);
|
|
122
|
+
min-width: var(--spacingHorizontalS);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&::after {
|
|
126
|
+
border-top-style: solid;
|
|
127
|
+
border-top-width: var(--strokeWidthThin);
|
|
128
|
+
min-width: var(--spacingHorizontalS);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.root:where(.horizontal.inset) {
|
|
133
|
+
padding-inline-start: var(--spacingHorizontalM);
|
|
134
|
+
padding-inline-end: var(--spacingHorizontalM);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.root:where(.horizontal.start) {
|
|
138
|
+
text-align: left;
|
|
139
|
+
&:dir(rtl) {
|
|
140
|
+
text-align: right;
|
|
141
|
+
}
|
|
142
|
+
&::before {
|
|
143
|
+
content: '';
|
|
144
|
+
margin-inline-end: var(--spacingHorizontalM);
|
|
145
|
+
max-width: var(--spacingHorizontalS);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&::after {
|
|
149
|
+
margin-inline-start: var(--spacingHorizontalM);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.root:where(.horizontal.center) {
|
|
154
|
+
text-align: center;
|
|
155
|
+
&::before {
|
|
156
|
+
margin-inline-end: var(--spacingHorizontalM);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&::after {
|
|
160
|
+
margin-inline-start: var(--spacingHorizontalM);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.root:where(.horizontal.end) {
|
|
165
|
+
text-align: right;
|
|
166
|
+
&:dir(rtl) {
|
|
167
|
+
text-align: left;
|
|
168
|
+
}
|
|
169
|
+
&::before {
|
|
170
|
+
margin-inline-end: var(--spacingHorizontalM);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&::after {
|
|
174
|
+
content: '';
|
|
175
|
+
margin-inline-start: var(--spacingHorizontalM);
|
|
176
|
+
max-width: var(--spacingHorizontalS);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.root:where(.vertical) {
|
|
181
|
+
flex-direction: column;
|
|
182
|
+
min-height: var(--spacingHorizontalXL);
|
|
183
|
+
&::before {
|
|
184
|
+
border-inline-end-style: solid;
|
|
185
|
+
border-inline-end-width: var(--strokeWidthThin);
|
|
186
|
+
min-height: var(--spacingHorizontalS);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&::after {
|
|
190
|
+
border-inline-end-style: solid;
|
|
191
|
+
border-inline-end-width: var(--strokeWidthThin);
|
|
192
|
+
min-height: var(--spacingHorizontalS);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.root:where(.vertical.inset) {
|
|
197
|
+
margin-top: var(--spacingHorizontalM);
|
|
198
|
+
margin-bottom: var(--spacingHorizontalM);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.root:where(.vertical.start) {
|
|
202
|
+
&::before {
|
|
203
|
+
content: '';
|
|
204
|
+
margin-bottom: var(--spacingHorizontalM);
|
|
205
|
+
max-height: var(--spacingHorizontalS);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
&::after {
|
|
209
|
+
margin-top: var(--spacingHorizontalM);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.root:where(.vertical.center) {
|
|
214
|
+
&::before {
|
|
215
|
+
margin-bottom: var(--spacingHorizontalM);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
&::after {
|
|
219
|
+
margin-top: var(--spacingHorizontalM);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.root:where(.vertical.end) {
|
|
224
|
+
&::before {
|
|
225
|
+
margin-bottom: var(--spacingHorizontalM);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
&::after {
|
|
229
|
+
content: '';
|
|
230
|
+
margin-top: var(--spacingHorizontalM);
|
|
231
|
+
max-height: var(--spacingHorizontalS);
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.root:where(.vertical.withChildren) {
|
|
236
|
+
min-height: calc(var(--spacingVerticalXXXL) * 2 + var(--spacingVerticalXL));
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.root:where(:not(.withChildren)) {
|
|
240
|
+
&::before {
|
|
241
|
+
margin-bottom: 0;
|
|
242
|
+
margin-inline-end: 0;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
&::after {
|
|
246
|
+
margin-inline-start: 0;
|
|
247
|
+
margin-top: 0;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Divider/Divider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n /**\n * Root of the component that renders as a `<div>` tag.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Wrapper for content when presented.\n */\n wrapper: NonNullable<Slot<'div'>>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * Determines the alignment of the content within the divider.\n *\n * @default 'center'\n */\n alignContent?: 'start' | 'center' | 'end';\n\n /**\n * A divider can have one of the preset appearances.\n * When not specified, the divider has its default appearance.\n *\n * @default 'default'\n */\n appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n /**\n * Adds padding to the beginning and end of the divider.\n *\n * @default false\n */\n inset?: boolean;\n\n /**\n * A divider can be horizontal (default) or vertical.\n *\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type DividerBaseProps = Omit<DividerProps, 'alignContent' | 'appearance' | 'inset'>;\n\nexport type DividerState = ComponentState<DividerSlots> &\n Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n\nexport type DividerBaseState = Omit<DividerState, 'alignContent' | 'appearance' | 'inset'>;\n"],"names":[],"mappings":""}
|
|
@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
Divider
|
|
12
|
+
get Divider () {
|
|
13
13
|
return _Divider.Divider;
|
|
14
14
|
},
|
|
15
|
-
dividerClassNames
|
|
15
|
+
get dividerClassNames () {
|
|
16
16
|
return _useDividerStylesstyles.dividerClassNames;
|
|
17
17
|
},
|
|
18
|
-
renderDivider_unstable
|
|
18
|
+
get renderDivider_unstable () {
|
|
19
19
|
return _renderDivider.renderDivider_unstable;
|
|
20
20
|
},
|
|
21
|
-
useDividerBase_unstable
|
|
21
|
+
get useDividerBase_unstable () {
|
|
22
22
|
return _useDivider.useDividerBase_unstable;
|
|
23
23
|
},
|
|
24
|
-
useDividerStyles_unstable
|
|
24
|
+
get useDividerStyles_unstable () {
|
|
25
25
|
return _useDividerStylesstyles.useDividerStyles_unstable;
|
|
26
26
|
},
|
|
27
|
-
useDivider_unstable
|
|
27
|
+
get useDivider_unstable () {
|
|
28
28
|
return _useDivider.useDivider_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Divider/index.ts"],"sourcesContent":["export { Divider } from './Divider';\nexport type { DividerBaseProps, DividerProps, DividerSlots, DividerBaseState, DividerState } from './Divider.types';\nexport { renderDivider_unstable } from './renderDivider';\nexport { useDivider_unstable, useDividerBase_unstable } from './useDivider';\nexport { dividerClassNames, useDividerStyles_unstable } from './useDividerStyles.styles';\n"],"names":["Divider","renderDivider_unstable","useDivider_unstable","useDividerBase_unstable","dividerClassNames","useDividerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPI,yCAAiB;;;eAFjBH,qCAAsB;;;eACDE,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,eAAY;+BAEG,qBAAkB;4BACI,kBAAe;wCACf,+BAA4B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Divider/renderDivider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerBaseState } from './Divider.types';\n\n/**\n * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.\n */\nexport const renderDivider_unstable = (state: DividerBaseState): JSXElement => {\n assertSlots<DividerSlots>(state);\n return (\n <state.root>{state.root.children !== undefined && <state.wrapper>{state.root.children}</state.wrapper>}</state.root>\n );\n};\n"],"names":["assertSlots","renderDivider_unstable","state","root","children","undefined","wrapper"],"mappings":";;;;+BAUaC;;;;;;;gCATb,gDAAiD,GAEjD,SAASD,WAAW,QAAQ,4BAA4B;AAOjD,+BAA+B,CAACE;QACrCF,2BAAAA,EAA0BE;IAC1B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAMC,IAAI,CAACC,QAAQ,KAAKC,aAAAA,WAAAA,OAAa,eAAA,EAACH,MAAMI,OAAO,EAAA;sBAAEJ,MAAMC,IAAI,CAACC,QAAQ;;;AAEzF,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
useDividerBase_unstable
|
|
13
|
+
get useDividerBase_unstable () {
|
|
14
14
|
return useDividerBase_unstable;
|
|
15
15
|
},
|
|
16
|
-
useDivider_unstable
|
|
16
|
+
get useDivider_unstable () {
|
|
17
17
|
return useDivider_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Divider/useDivider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport type { DividerBaseProps, DividerBaseState, DividerProps, DividerState } from './Divider.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElement>): DividerState => {\n const { alignContent = 'center', appearance = 'default', inset = false, ...rest } = props;\n\n const state = useDividerBase_unstable(rest, ref);\n\n return {\n alignContent,\n appearance,\n inset,\n ...state,\n };\n};\n\n/**\n * Base hook that provides behavior and structure of the Divider component.\n * It doesn't include design-related features.\n *\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDividerBase_unstable = (props: DividerBaseProps, ref?: React.Ref<HTMLElement>): DividerBaseState => {\n const { vertical = false, wrapper, ...rest } = props;\n const dividerId = useId('divider-');\n\n return {\n vertical,\n components: {\n root: 'div',\n wrapper: 'div',\n },\n root: slot.always(\n {\n role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n wrapper: slot.always(wrapper, {\n defaultProps: {\n id: dividerId,\n children: props.children,\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["useId","slot","useDivider_unstable","props","ref","alignContent","appearance","inset","rest","state","useDividerBase_unstable","vertical","wrapper","dividerId","components","root","always","role","children","undefined","elementType","defaultProps","id"],"mappings":"AAAA;;;;;;;;;;;;QA+BaU;;;;;;;gCA5Be,4BAA4B;AAQjD,MAAMR,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,eAAe,QAAQ,EAAEC,aAAa,SAAS,EAAEC,QAAQ,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEpF,MAAMM,QAAQC,wBAAwBF,MAAMJ;IAE5C,OAAO;QACLC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AASK,gCAAgC,CAACN,OAAyBC;IAC/D,MAAM,EAAEO,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGJ,MAAM,GAAGL;IAC/C,MAAMU,gBAAYb,qBAAAA,EAAM;IAExB,OAAO;QACLW;QACAG,YAAY;YACVC,MAAM;YACNH,SAAS;QACX;QACAG,MAAMd,oBAAAA,CAAKe,MAAM,CACf;YACEC,MAAM;YACN,oBAAoBN,WAAW,aAAa;YAC5C,mBAAmBR,MAAMe,QAAQ,GAAGL,YAAYM;YAChDf,KAAKA;YACL,GAAGI,IAAI;QACT,GACA;YAAEY,aAAa;QAAM;QAEvBR,SAASX,oBAAAA,CAAKe,MAAM,CAACJ,SAAS;YAC5BS,cAAc;gBACZC,IAAIT;gBACJK,UAAUf,MAAMe,QAAQ;YAC1B;YACAE,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
dividerClassNames
|
|
13
|
+
get dividerClassNames () {
|
|
14
14
|
return dividerClassNames;
|
|
15
15
|
},
|
|
16
|
-
useDividerStyles_unstable
|
|
16
|
+
get useDividerStyles_unstable () {
|
|
17
17
|
return useDividerStyles_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, shorthands, makeStyles } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const dividerClassNames = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper'\n};\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\nconst useBaseStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n flexGrow: 1,\n position: 'relative',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n textAlign: 'center',\n '::before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1\n },\n '::after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1\n }\n },\n // Childless styles\n childless: {\n '::before': {\n marginBottom: 0,\n marginRight: 0\n },\n '::after': {\n marginLeft: 0,\n marginTop: 0\n }\n },\n // Alignment variations\n start: {\n '::after': {\n content: '\"\"'\n }\n },\n center: {\n '::before': {\n content: '\"\"'\n },\n '::after': {\n content: '\"\"'\n }\n },\n end: {\n '::before': {\n content: '\"\"'\n }\n },\n // Appearance variations\n brand: {\n color: tokens.colorBrandForeground1,\n '::before': {\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n }\n },\n default: {\n color: tokens.colorNeutralForeground2,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n }\n },\n subtle: {\n color: tokens.colorNeutralForeground3,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3)\n }\n },\n strong: {\n color: tokens.colorNeutralForeground1,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n }\n }\n});\nconst useHorizontalStyles = makeStyles({\n // Base styles\n base: {\n width: '100%',\n '::before': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength\n },\n '::after': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength\n }\n },\n // Inset styles\n inset: {\n paddingLeft: insetSpacing,\n paddingRight: insetSpacing\n },\n // Alignment variations\n start: {\n textAlign: 'left',\n '::before': {\n content: '\"\"',\n marginRight: contentSpacing,\n maxWidth: maxStartEndLength\n },\n '::after': {\n marginLeft: contentSpacing\n }\n },\n center: {\n textAlign: 'center',\n '::before': {\n marginRight: contentSpacing\n },\n '::after': {\n marginLeft: contentSpacing\n }\n },\n end: {\n textAlign: 'right',\n '::before': {\n marginRight: contentSpacing\n },\n '::after': {\n content: '\"\"',\n marginLeft: contentSpacing,\n maxWidth: maxStartEndLength\n }\n }\n});\nconst useVerticalStyles = makeStyles({\n // Base styles\n base: {\n flexDirection: 'column',\n minHeight: '20px',\n '::before': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength\n },\n '::after': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength\n }\n },\n // Inset styles\n inset: {\n marginTop: insetSpacing,\n marginBottom: insetSpacing\n },\n // With children styles\n withChildren: {\n minHeight: '84px'\n },\n // Alignment variations\n start: {\n '::before': {\n content: '\"\"',\n marginBottom: contentSpacing,\n maxHeight: maxStartEndLength\n },\n '::after': {\n marginTop: contentSpacing\n }\n },\n center: {\n '::before': {\n marginBottom: contentSpacing\n },\n '::after': {\n marginTop: contentSpacing\n }\n },\n end: {\n '::before': {\n marginBottom: contentSpacing\n },\n '::after': {\n content: '\"\"',\n marginTop: contentSpacing,\n maxHeight: maxStartEndLength\n }\n }\n});\nexport const useDividerStyles_unstable = (state)=>{\n const baseStyles = useBaseStyles();\n const horizontalStyles = useHorizontalStyles();\n const verticalStyles = useVerticalStyles();\n const { alignContent, appearance, inset, vertical } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dividerClassNames.root, // Base styles\n baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles\n !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles\n vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles\n state.root.children === undefined && baseStyles.childless, // User provided class name\n state.root.className);\n if (state.wrapper) {\n // eslint-disable-next-line react-hooks/immutability\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n return state;\n};\n"],"names":["mergeClasses","shorthands","__styles","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","base","Bt984gj","B7ck84d","mc9l5x","Beiy3e4","Bh6795r","qhf8xq","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","fsow6f","Bcvre1j","Br0sdwz","Bn78ew0","li1rpt","ap17g6","B771hl4","childless","susq4k","Bicfajf","jwcpgy","B4rk6o","start","Bsft5z2","center","Ftih45","end","brand","sj55zd","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","B0n5ga8","s924m2","B1q35kw","Gp14am","subtle","strong","d","useHorizontalStyles","a9b677","Bdkvgpv","B0qfbqy","pbipgd","Bm2nyyq","xrcqlc","i5u598","inset","uwmqm3","z189sj","Bxwl2t9","Iy66sp","useVerticalStyles","sshi5w","m598lv","B4f6apu","zkzzav","Barhvk9","Ihftqj","Bde111x","B6of3ja","jrapky","withChildren","Bbdr6tz","gn64ia","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","children","undefined"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,iBAAiB;;;6BAiNQ;eAAzB2E;;;uBAnNwC,gBAAgB;AAE9D,0BAA0B;IAC7B1E,IAAI,EAAE,aAAa;IACnBC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,cAAc,GAAG,MAAM;AAC7B,MAAMC,YAAY,GAAG,MAAM;AAC3B,MAAMC,iBAAiB,GAAG,KAAK;AAC/B,MAAMC,iBAAiB,GAAG,MAAM;AAChC,MAAMC,aAAa,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,GAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA,WAAA;QAAAR,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,MAAA,EAAA;QAAAT,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,MAAA,EAAA;QAAAV,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA4FrB,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGnD,eAAA,EAAA;IAAAU,IAAA,EAAA;QAAA0C,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA5B,KAAA,EAAA;QAAAZ,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAe,MAAA,EAAA;QAAAN,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAgC,OAAA,EAAA;QAAA/B,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAI,MAAA,EAAA;QAAAd,MAAA,EAAA;QAAAS,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,GAAA,EAAA;QAAAhB,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAS,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAI,OAAA,EAAA;QAAAH,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAgC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAb,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAoD3B,CAAC;AACF,MAAMc,iBAAiB,GAAA,WAAA,OAAGhE,eAAA,EAAA;IAAAU,IAAA,EAAA;QAAAI,OAAA,EAAA;QAAAmD,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAZ,KAAA,EAAA;QAAAa,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAT,MAAA,EAAA;IAAA;IAAAhC,KAAA,EAAA;QAAAG,MAAA,EAAA;QAAAP,MAAA,EAAA;QAAA8C,OAAA,EAAA;QAAA3C,MAAA,EAAA;IAAA;IAAAG,MAAA,EAAA;QAAAN,MAAA,EAAA;QAAAG,MAAA,EAAA;IAAA;IAAAK,GAAA,EAAA;QAAAR,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAF,MAAA,EAAA;QAAA4C,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA1B,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsDzB,CAAC;AACK,mCAAmC4B,KAAK,IAAG;IAC9C,MAAMC,UAAU,GAAGtE,aAAa,CAAC,CAAC;IAClC,MAAMuE,gBAAgB,GAAG7B,mBAAmB,CAAC,CAAC;IAC9C,MAAM8B,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;IAC1C,MAAM,EAAEkB,YAAY,EAAEC,UAAU,EAAExB,KAAK,EAAEyB,QAAAA,EAAU,GAAGN,KAAK;IAC3D,oDAAA;IACAA,KAAK,CAAC3E,IAAI,CAACkF,SAAS,OAAGvF,mBAAY,EAACI,iBAAiB,CAACC,IAAI,EAAE,cAAA;IAC5D4E,UAAU,CAACrE,IAAI,EAAEqE,UAAU,CAACG,YAAY,CAAC,EAAEC,UAAU,IAAIJ,UAAU,CAACI,UAAU,CAAC,EAAE,oBAAA;IACjF,CAACC,QAAQ,IAAIJ,gBAAgB,CAACtE,IAAI,EAAE,CAAC0E,QAAQ,IAAIzB,KAAK,IAAIqB,gBAAgB,CAACrB,KAAK,EAAE,CAACyB,QAAQ,IAAIJ,gBAAgB,CAACE,YAAY,CAAC,EAAE,kBAAA;IAC/HE,QAAQ,IAAIH,cAAc,CAACvE,IAAI,EAAE0E,QAAQ,IAAIzB,KAAK,IAAIsB,cAAc,CAACtB,KAAK,EAAEyB,QAAQ,IAAIH,cAAc,CAACC,YAAY,CAAC,EAAEE,QAAQ,IAAIN,KAAK,CAAC3E,IAAI,CAACmF,QAAQ,KAAKC,SAAS,IAAIN,cAAc,CAACP,YAAY,EAAE,mBAAA;IACpMI,KAAK,CAAC3E,IAAI,CAACmF,QAAQ,KAAKC,SAAS,IAAIR,UAAU,CAACnD,SAAS,EAAE,2BAAA;IAC3DkD,KAAK,CAAC3E,IAAI,CAACkF,SAAS,CAAC;IACrB,IAAIP,KAAK,CAAC1E,OAAO,EAAE;QACf,oDAAA;QACA0E,KAAK,CAAC1E,OAAO,CAACiF,SAAS,OAAGvF,mBAAY,EAACI,iBAAiB,CAACE,OAAO,EAAE0E,KAAK,CAAC1E,OAAO,CAACiF,SAAS,CAAC;IAC9F;IACA,OAAOP,KAAK;AAChB,CAAC"}
|
|
1
|
+
{"version":3,"sources":["useDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, shorthands, makeStyles } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const dividerClassNames = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper'\n};\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\nconst useBaseStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n flexGrow: 1,\n position: 'relative',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n textAlign: 'center',\n '::before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1\n },\n '::after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1\n }\n },\n // Childless styles\n childless: {\n '::before': {\n marginBottom: 0,\n marginRight: 0\n },\n '::after': {\n marginLeft: 0,\n marginTop: 0\n }\n },\n // Alignment variations\n start: {\n '::after': {\n content: '\"\"'\n }\n },\n center: {\n '::before': {\n content: '\"\"'\n },\n '::after': {\n content: '\"\"'\n }\n },\n end: {\n '::before': {\n content: '\"\"'\n }\n },\n // Appearance variations\n brand: {\n color: tokens.colorBrandForeground1,\n '::before': {\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n }\n },\n default: {\n color: tokens.colorNeutralForeground2,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n }\n },\n subtle: {\n color: tokens.colorNeutralForeground3,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3)\n }\n },\n strong: {\n color: tokens.colorNeutralForeground1,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n }\n }\n});\nconst useHorizontalStyles = makeStyles({\n // Base styles\n base: {\n width: '100%',\n '::before': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength\n },\n '::after': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength\n }\n },\n // Inset styles\n inset: {\n paddingLeft: insetSpacing,\n paddingRight: insetSpacing\n },\n // Alignment variations\n start: {\n textAlign: 'left',\n '::before': {\n content: '\"\"',\n marginRight: contentSpacing,\n maxWidth: maxStartEndLength\n },\n '::after': {\n marginLeft: contentSpacing\n }\n },\n center: {\n textAlign: 'center',\n '::before': {\n marginRight: contentSpacing\n },\n '::after': {\n marginLeft: contentSpacing\n }\n },\n end: {\n textAlign: 'right',\n '::before': {\n marginRight: contentSpacing\n },\n '::after': {\n content: '\"\"',\n marginLeft: contentSpacing,\n maxWidth: maxStartEndLength\n }\n }\n});\nconst useVerticalStyles = makeStyles({\n // Base styles\n base: {\n flexDirection: 'column',\n minHeight: '20px',\n '::before': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength\n },\n '::after': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength\n }\n },\n // Inset styles\n inset: {\n marginTop: insetSpacing,\n marginBottom: insetSpacing\n },\n // With children styles\n withChildren: {\n minHeight: '84px'\n },\n // Alignment variations\n start: {\n '::before': {\n content: '\"\"',\n marginBottom: contentSpacing,\n maxHeight: maxStartEndLength\n },\n '::after': {\n marginTop: contentSpacing\n }\n },\n center: {\n '::before': {\n marginBottom: contentSpacing\n },\n '::after': {\n marginTop: contentSpacing\n }\n },\n end: {\n '::before': {\n marginBottom: contentSpacing\n },\n '::after': {\n content: '\"\"',\n marginTop: contentSpacing,\n maxHeight: maxStartEndLength\n }\n }\n});\nexport const useDividerStyles_unstable = (state)=>{\n const baseStyles = useBaseStyles();\n const horizontalStyles = useHorizontalStyles();\n const verticalStyles = useVerticalStyles();\n const { alignContent, appearance, inset, vertical } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dividerClassNames.root, // Base styles\n baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles\n !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles\n vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles\n state.root.children === undefined && baseStyles.childless, // User provided class name\n state.root.className);\n if (state.wrapper) {\n // eslint-disable-next-line react-hooks/immutability\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n return state;\n};\n"],"names":["mergeClasses","shorthands","__styles","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","base","Bt984gj","B7ck84d","mc9l5x","Beiy3e4","Bh6795r","qhf8xq","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","fsow6f","Bcvre1j","Br0sdwz","Bn78ew0","li1rpt","ap17g6","B771hl4","childless","susq4k","Bicfajf","jwcpgy","B4rk6o","start","Bsft5z2","center","Ftih45","end","brand","sj55zd","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","B0n5ga8","s924m2","B1q35kw","Gp14am","subtle","strong","d","useHorizontalStyles","a9b677","Bdkvgpv","B0qfbqy","pbipgd","Bm2nyyq","xrcqlc","i5u598","inset","uwmqm3","z189sj","Bxwl2t9","Iy66sp","useVerticalStyles","sshi5w","m598lv","B4f6apu","zkzzav","Barhvk9","Ihftqj","Bde111x","B6of3ja","jrapky","withChildren","Bbdr6tz","gn64ia","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","children","undefined"],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
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: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
get dividerClassNames () {
|
|
13
|
+
return dividerClassNames;
|
|
14
|
+
},
|
|
15
|
+
get useDividerStyles_unstable () {
|
|
16
|
+
return useDividerStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
20
|
+
const _clsx = require("clsx");
|
|
21
|
+
const _Dividermodulecss = /*#__PURE__*/ _interop_require_default._(require("./Divider.module.css"));
|
|
22
|
+
const dividerClassNames = {
|
|
23
|
+
root: 'fui-Divider',
|
|
24
|
+
wrapper: 'fui-Divider__wrapper'
|
|
25
|
+
};
|
|
26
|
+
const useDividerStyles_unstable = (state)=>{
|
|
27
|
+
state.root.className = (0, _clsx.clsx)(dividerClassNames.root, _Dividermodulecss.default.root, _Dividermodulecss.default[state.alignContent], state.appearance && _Dividermodulecss.default[state.appearance], _Dividermodulecss.default[state.vertical ? 'vertical' : 'horizontal'], state.inset && _Dividermodulecss.default.inset, state.root.children !== undefined && _Dividermodulecss.default.withChildren, state.root.className);
|
|
28
|
+
if (state.wrapper) {
|
|
29
|
+
state.wrapper.className = (0, _clsx.clsx)(dividerClassNames.wrapper, state.wrapper.className);
|
|
30
|
+
}
|
|
31
|
+
return state;
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Divider/useDividerStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from './Divider.types';\nimport styles from './Divider.module.css';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper',\n};\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n state.root.className = clsx(\n dividerClassNames.root,\n styles.root,\n styles[state.alignContent],\n state.appearance && styles[state.appearance],\n styles[state.vertical ? 'vertical' : 'horizontal'],\n state.inset && styles.inset,\n state.root.children !== undefined && styles.withChildren,\n state.root.className,\n );\n if (state.wrapper) {\n state.wrapper.className = clsx(dividerClassNames.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"names":["clsx","styles","dividerClassNames","root","wrapper","useDividerStyles_unstable","state","className","alignContent","appearance","vertical","inset","children","undefined","withChildren"],"mappings":";;;;;;;;;;;QAKaE;;;;;;;;sBALQ,OAAO;2EAGT,uBAAuB;AAEnC,0BAAwD;IAC7DC,MAAM;IACNC,SAAS;AACX,EAAE;AAEK,MAAMC,4BAA4B,CAACC;IACxCA,MAAMH,IAAI,CAACI,SAAS,OAAGP,UAAAA,EACrBE,kBAAkBC,IAAI,EACtBF,yBAAAA,CAAOE,IAAI,EACXF,yBAAM,CAACK,MAAME,YAAY,CAAC,EAC1BF,MAAMG,UAAU,IAAIR,yBAAM,CAACK,MAAMG,UAAU,CAAC,EAC5CR,yBAAM,CAACK,MAAMI,QAAQ,GAAG,aAAa,aAAa,EAClDJ,MAAMK,KAAK,IAAIV,yBAAAA,CAAOU,KAAK,EAC3BL,MAAMH,IAAI,CAACS,QAAQ,KAAKC,aAAaZ,yBAAAA,CAAOa,YAAY,EACxDR,MAAMH,IAAI,CAACI,SAAS;IAEtB,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,OAAGP,UAAAA,EAAKE,kBAAkBE,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACnF;IAEA,OAAOD;AACT,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
dividerClassNames
|
|
13
|
+
get dividerClassNames () {
|
|
14
14
|
return dividerClassNames;
|
|
15
15
|
},
|
|
16
|
-
useDividerStyles_unstable
|
|
16
|
+
get useDividerStyles_unstable () {
|
|
17
17
|
return useDividerStyles_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Divider/useDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { DividerSlots, DividerState } from './Divider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper',\n};\n\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n flexGrow: 1,\n position: 'relative',\n\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n textAlign: 'center',\n\n '::before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n\n '::after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n },\n\n // Childless styles\n childless: {\n '::before': {\n marginBottom: 0,\n marginRight: 0,\n },\n\n '::after': {\n marginLeft: 0,\n marginTop: 0,\n },\n },\n\n // Alignment variations\n start: {\n '::after': {\n content: '\"\"',\n },\n },\n center: {\n '::before': {\n content: '\"\"',\n },\n '::after': {\n content: '\"\"',\n },\n },\n end: {\n '::before': {\n content: '\"\"',\n },\n },\n\n // Appearance variations\n brand: {\n color: tokens.colorBrandForeground1,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n },\n },\n default: {\n color: tokens.colorNeutralForeground2,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n },\n subtle: {\n color: tokens.colorNeutralForeground3,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n },\n strong: {\n color: tokens.colorNeutralForeground1,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n});\n\nconst useHorizontalStyles = makeStyles({\n // Base styles\n base: {\n width: '100%',\n\n '::before': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength,\n },\n\n '::after': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength,\n },\n },\n\n // Inset styles\n inset: {\n paddingLeft: insetSpacing,\n paddingRight: insetSpacing,\n },\n\n // Alignment variations\n start: {\n textAlign: 'left',\n\n '::before': {\n content: '\"\"',\n marginRight: contentSpacing,\n maxWidth: maxStartEndLength,\n },\n\n '::after': {\n marginLeft: contentSpacing,\n },\n },\n center: {\n textAlign: 'center',\n\n '::before': {\n marginRight: contentSpacing,\n },\n '::after': {\n marginLeft: contentSpacing,\n },\n },\n end: {\n textAlign: 'right',\n\n '::before': {\n marginRight: contentSpacing,\n },\n '::after': {\n content: '\"\"',\n marginLeft: contentSpacing,\n maxWidth: maxStartEndLength,\n },\n },\n});\n\nconst useVerticalStyles = makeStyles({\n // Base styles\n base: {\n flexDirection: 'column',\n minHeight: '20px',\n\n '::before': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength,\n },\n\n '::after': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength,\n },\n },\n\n // Inset styles\n inset: {\n marginTop: insetSpacing,\n marginBottom: insetSpacing,\n },\n\n // With children styles\n withChildren: {\n minHeight: '84px',\n },\n\n // Alignment variations\n start: {\n '::before': {\n content: '\"\"',\n marginBottom: contentSpacing,\n maxHeight: maxStartEndLength,\n },\n\n '::after': {\n marginTop: contentSpacing,\n },\n },\n center: {\n '::before': {\n marginBottom: contentSpacing,\n },\n '::after': {\n marginTop: contentSpacing,\n },\n },\n end: {\n '::before': {\n marginBottom: contentSpacing,\n },\n '::after': {\n content: '\"\"',\n marginTop: contentSpacing,\n maxHeight: maxStartEndLength,\n },\n },\n});\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n const baseStyles = useBaseStyles();\n const horizontalStyles = useHorizontalStyles();\n const verticalStyles = useVerticalStyles();\n\n const { alignContent, appearance, inset, vertical } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n dividerClassNames.root,\n\n // Base styles\n baseStyles.base,\n baseStyles[alignContent],\n appearance && baseStyles[appearance],\n\n // Horizontal styles\n !vertical && horizontalStyles.base,\n !vertical && inset && horizontalStyles.inset,\n !vertical && horizontalStyles[alignContent],\n\n // Vertical styles\n vertical && verticalStyles.base,\n vertical && inset && verticalStyles.inset,\n vertical && verticalStyles[alignContent],\n vertical && state.root.children !== undefined && verticalStyles.withChildren,\n\n // Childless styles\n state.root.children === undefined && baseStyles.childless,\n\n // User provided class name\n state.root.className,\n );\n\n if (state.wrapper) {\n // eslint-disable-next-line react-hooks/immutability\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"names":["mergeClasses","shorthands","makeStyles","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","base","alignItems","boxSizing","display","flexDirection","flexGrow","position","fontFamily","fontFamilyBase","fontSize","fontSizeBase200","fontWeight","fontWeightRegular","lineHeight","lineHeightBase200","textAlign","childless","marginBottom","marginRight","marginLeft","marginTop","start","content","center","end","brand","color","colorBrandForeground1","borderColor","colorBrandStroke1","default","colorNeutralForeground2","colorNeutralStroke2","subtle","colorNeutralForeground3","colorNeutralStroke3","strong","colorNeutralForeground1","colorNeutralStroke1","useHorizontalStyles","width","borderTopStyle","borderTopWidth","strokeWidthThin","minWidth","inset","paddingLeft","paddingRight","maxWidth","useVerticalStyles","minHeight","borderRightStyle","borderRightWidth","withChildren","maxHeight","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","children","undefined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Divider/useDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { DividerSlots, DividerState } from './Divider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper',\n};\n\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n flexGrow: 1,\n position: 'relative',\n\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n textAlign: 'center',\n\n '::before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n\n '::after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n },\n\n // Childless styles\n childless: {\n '::before': {\n marginBottom: 0,\n marginRight: 0,\n },\n\n '::after': {\n marginLeft: 0,\n marginTop: 0,\n },\n },\n\n // Alignment variations\n start: {\n '::after': {\n content: '\"\"',\n },\n },\n center: {\n '::before': {\n content: '\"\"',\n },\n '::after': {\n content: '\"\"',\n },\n },\n end: {\n '::before': {\n content: '\"\"',\n },\n },\n\n // Appearance variations\n brand: {\n color: tokens.colorBrandForeground1,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n },\n },\n default: {\n color: tokens.colorNeutralForeground2,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n },\n subtle: {\n color: tokens.colorNeutralForeground3,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n },\n strong: {\n color: tokens.colorNeutralForeground1,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n});\n\nconst useHorizontalStyles = makeStyles({\n // Base styles\n base: {\n width: '100%',\n\n '::before': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength,\n },\n\n '::after': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength,\n },\n },\n\n // Inset styles\n inset: {\n paddingLeft: insetSpacing,\n paddingRight: insetSpacing,\n },\n\n // Alignment variations\n start: {\n textAlign: 'left',\n\n '::before': {\n content: '\"\"',\n marginRight: contentSpacing,\n maxWidth: maxStartEndLength,\n },\n\n '::after': {\n marginLeft: contentSpacing,\n },\n },\n center: {\n textAlign: 'center',\n\n '::before': {\n marginRight: contentSpacing,\n },\n '::after': {\n marginLeft: contentSpacing,\n },\n },\n end: {\n textAlign: 'right',\n\n '::before': {\n marginRight: contentSpacing,\n },\n '::after': {\n content: '\"\"',\n marginLeft: contentSpacing,\n maxWidth: maxStartEndLength,\n },\n },\n});\n\nconst useVerticalStyles = makeStyles({\n // Base styles\n base: {\n flexDirection: 'column',\n minHeight: '20px',\n\n '::before': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength,\n },\n\n '::after': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength,\n },\n },\n\n // Inset styles\n inset: {\n marginTop: insetSpacing,\n marginBottom: insetSpacing,\n },\n\n // With children styles\n withChildren: {\n minHeight: '84px',\n },\n\n // Alignment variations\n start: {\n '::before': {\n content: '\"\"',\n marginBottom: contentSpacing,\n maxHeight: maxStartEndLength,\n },\n\n '::after': {\n marginTop: contentSpacing,\n },\n },\n center: {\n '::before': {\n marginBottom: contentSpacing,\n },\n '::after': {\n marginTop: contentSpacing,\n },\n },\n end: {\n '::before': {\n marginBottom: contentSpacing,\n },\n '::after': {\n content: '\"\"',\n marginTop: contentSpacing,\n maxHeight: maxStartEndLength,\n },\n },\n});\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n const baseStyles = useBaseStyles();\n const horizontalStyles = useHorizontalStyles();\n const verticalStyles = useVerticalStyles();\n\n const { alignContent, appearance, inset, vertical } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n dividerClassNames.root,\n\n // Base styles\n baseStyles.base,\n baseStyles[alignContent],\n appearance && baseStyles[appearance],\n\n // Horizontal styles\n !vertical && horizontalStyles.base,\n !vertical && inset && horizontalStyles.inset,\n !vertical && horizontalStyles[alignContent],\n\n // Vertical styles\n vertical && verticalStyles.base,\n vertical && inset && verticalStyles.inset,\n vertical && verticalStyles[alignContent],\n vertical && state.root.children !== undefined && verticalStyles.withChildren,\n\n // Childless styles\n state.root.children === undefined && baseStyles.childless,\n\n // User provided class name\n state.root.className,\n );\n\n if (state.wrapper) {\n // eslint-disable-next-line react-hooks/immutability\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"names":["mergeClasses","shorthands","makeStyles","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","base","alignItems","boxSizing","display","flexDirection","flexGrow","position","fontFamily","fontFamilyBase","fontSize","fontSizeBase200","fontWeight","fontWeightRegular","lineHeight","lineHeightBase200","textAlign","childless","marginBottom","marginRight","marginLeft","marginTop","start","content","center","end","brand","color","colorBrandForeground1","borderColor","colorBrandStroke1","default","colorNeutralForeground2","colorNeutralStroke2","subtle","colorNeutralForeground3","colorNeutralStroke3","strong","colorNeutralForeground1","colorNeutralStroke1","useHorizontalStyles","width","borderTopStyle","borderTopWidth","strokeWidthThin","minWidth","inset","paddingLeft","paddingRight","maxWidth","useVerticalStyles","minHeight","borderRightStyle","borderRightWidth","withChildren","maxHeight","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","children","undefined"],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
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: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
get dividerClassNames () {
|
|
13
|
+
return dividerClassNames;
|
|
14
|
+
},
|
|
15
|
+
get useDividerStyles_unstable () {
|
|
16
|
+
return useDividerStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
20
|
+
const _clsx = require("clsx");
|
|
21
|
+
const _Dividermodulecss = /*#__PURE__*/ _interop_require_default._(require("./Divider.module.css"));
|
|
22
|
+
const dividerClassNames = {
|
|
23
|
+
root: 'fui-Divider',
|
|
24
|
+
wrapper: 'fui-Divider__wrapper'
|
|
25
|
+
};
|
|
26
|
+
const useDividerStyles_unstable = (state)=>{
|
|
27
|
+
state.root.className = (0, _clsx.clsx)(dividerClassNames.root, _Dividermodulecss.default.root, _Dividermodulecss.default[state.alignContent], state.appearance && _Dividermodulecss.default[state.appearance], _Dividermodulecss.default[state.vertical ? 'vertical' : 'horizontal'], state.inset && _Dividermodulecss.default.inset, state.root.children !== undefined && _Dividermodulecss.default.withChildren, state.root.className);
|
|
28
|
+
if (state.wrapper) {
|
|
29
|
+
state.wrapper.className = (0, _clsx.clsx)(dividerClassNames.wrapper, state.wrapper.className);
|
|
30
|
+
}
|
|
31
|
+
return state;
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Divider/useDividerStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from './Divider.types';\nimport styles from './Divider.module.css';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper',\n};\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n state.root.className = clsx(\n dividerClassNames.root,\n styles.root,\n styles[state.alignContent],\n state.appearance && styles[state.appearance],\n styles[state.vertical ? 'vertical' : 'horizontal'],\n state.inset && styles.inset,\n state.root.children !== undefined && styles.withChildren,\n state.root.className,\n );\n if (state.wrapper) {\n state.wrapper.className = clsx(dividerClassNames.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"names":["clsx","styles","dividerClassNames","root","wrapper","useDividerStyles_unstable","state","className","alignContent","appearance","vertical","inset","children","undefined","withChildren"],"mappings":";;;;;;;;;;;QAKaE;;;;;;;;sBALQ,OAAO;2EAGT,uBAAuB;AAEnC,0BAAwD;IAC7DC,MAAM;IACNC,SAAS;AACX,EAAE;AAEK,MAAMC,4BAA4B,CAACC;IACxCA,MAAMH,IAAI,CAACI,SAAS,OAAGP,UAAAA,EACrBE,kBAAkBC,IAAI,EACtBF,yBAAAA,CAAOE,IAAI,EACXF,yBAAM,CAACK,MAAME,YAAY,CAAC,EAC1BF,MAAMG,UAAU,IAAIR,yBAAM,CAACK,MAAMG,UAAU,CAAC,EAC5CR,yBAAM,CAACK,MAAMI,QAAQ,GAAG,aAAa,aAAa,EAClDJ,MAAMK,KAAK,IAAIV,yBAAAA,CAAOU,KAAK,EAC3BL,MAAMH,IAAI,CAACS,QAAQ,KAAKC,aAAaZ,yBAAAA,CAAOa,YAAY,EACxDR,MAAMH,IAAI,CAACI,SAAS;IAEtB,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,OAAGP,UAAAA,EAAKE,kBAAkBE,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACnF;IAEA,OAAOD;AACT,EAAE"}
|
package/lib-commonjs/index.cjs
CHANGED
|
@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
Divider
|
|
12
|
+
get Divider () {
|
|
13
13
|
return _Divider.Divider;
|
|
14
14
|
},
|
|
15
|
-
dividerClassNames
|
|
15
|
+
get dividerClassNames () {
|
|
16
16
|
return _Divider.dividerClassNames;
|
|
17
17
|
},
|
|
18
|
-
renderDivider_unstable
|
|
18
|
+
get renderDivider_unstable () {
|
|
19
19
|
return _Divider.renderDivider_unstable;
|
|
20
20
|
},
|
|
21
|
-
useDividerBase_unstable
|
|
21
|
+
get useDividerBase_unstable () {
|
|
22
22
|
return _Divider.useDividerBase_unstable;
|
|
23
23
|
},
|
|
24
|
-
useDividerStyles_unstable
|
|
24
|
+
get useDividerStyles_unstable () {
|
|
25
25
|
return _Divider.useDividerStyles_unstable;
|
|
26
26
|
},
|
|
27
|
-
useDivider_unstable
|
|
27
|
+
get useDivider_unstable () {
|
|
28
28
|
return _Divider.useDivider_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|