@primer/styled-react 0.0.0-20251007221437 → 0.0.0-20251007223355
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/dist/{PageHeader-BYlYLcfB.js → Tooltip-DIHgr01r.js} +77 -11
- package/dist/components/ActionList.d.ts +36 -0
- package/dist/components/ActionList.d.ts.map +1 -0
- package/dist/components/ActionMenu.d.ts +12 -0
- package/dist/components/ActionMenu.d.ts.map +1 -0
- package/dist/components/Autocomplete.d.ts +15 -0
- package/dist/components/Autocomplete.d.ts.map +1 -0
- package/dist/components/Avatar.d.ts +13 -0
- package/dist/components/Avatar.d.ts.map +1 -0
- package/dist/components/Breadcrumbs.d.ts +18 -0
- package/dist/components/Breadcrumbs.d.ts.map +1 -0
- package/dist/components/Checkbox.d.ts +5 -0
- package/dist/components/Checkbox.d.ts.map +1 -0
- package/dist/components/CheckboxGroup.d.ts +22 -0
- package/dist/components/CheckboxGroup.d.ts.map +1 -0
- package/dist/components/CircleBadge.d.ts +7 -0
- package/dist/components/CircleBadge.d.ts.map +1 -0
- package/dist/components/CounterLabel.d.ts +10 -0
- package/dist/components/CounterLabel.d.ts.map +1 -0
- package/dist/components/DataTable.d.ts +11 -0
- package/dist/components/DataTable.d.ts.map +1 -0
- package/dist/components/Dialog.d.ts +19 -0
- package/dist/components/Dialog.d.ts.map +1 -0
- package/dist/components/Header.d.ts.map +1 -1
- package/dist/components/Heading.d.ts +8 -0
- package/dist/components/Heading.d.ts.map +1 -0
- package/dist/components/Label.d.ts +9 -0
- package/dist/components/Label.d.ts.map +1 -0
- package/dist/components/Link.d.ts +7 -0
- package/dist/components/Link.d.ts.map +1 -0
- package/dist/components/NavList.d.ts +33 -0
- package/dist/components/NavList.d.ts.map +1 -0
- package/dist/components/Overlay.d.ts +7 -0
- package/dist/components/Overlay.d.ts.map +1 -0
- package/dist/components/PageHeader.d.ts +18 -14
- package/dist/components/PageHeader.d.ts.map +1 -1
- package/dist/components/PageLayout.d.ts +18 -0
- package/dist/components/PageLayout.d.ts.map +1 -0
- package/dist/components/RadioGroup.d.ts +22 -0
- package/dist/components/RadioGroup.d.ts.map +1 -0
- package/dist/components/RelativeTime.d.ts +6 -0
- package/dist/components/RelativeTime.d.ts.map +1 -0
- package/dist/components/SegmentedControl.d.ts +12 -0
- package/dist/components/SegmentedControl.d.ts.map +1 -0
- package/dist/components/Spinner.d.ts +6 -0
- package/dist/components/Spinner.d.ts.map +1 -0
- package/dist/components/StateLabel.d.ts +9 -0
- package/dist/components/StateLabel.d.ts.map +1 -0
- package/dist/components/SubNav.d.ts +9 -0
- package/dist/components/SubNav.d.ts.map +1 -0
- package/dist/components/Text.d.ts +7 -0
- package/dist/components/Text.d.ts.map +1 -0
- package/dist/components/Timeline.d.ts +26 -0
- package/dist/components/Timeline.d.ts.map +1 -0
- package/dist/components/ToggleSwitch.d.ts +6 -0
- package/dist/components/ToggleSwitch.d.ts.map +1 -0
- package/dist/components/Token.d.ts +7 -0
- package/dist/components/Token.d.ts.map +1 -0
- package/dist/components/Tooltip.d.ts +6 -0
- package/dist/components/Tooltip.d.ts.map +1 -0
- package/dist/components/Truncate.d.ts +7 -0
- package/dist/components/Truncate.d.ts.map +1 -0
- package/dist/components/UnderlineNav.d.ts +11 -0
- package/dist/components/UnderlineNav.d.ts.map +1 -0
- package/dist/components/UnderlinePanels.d.ts +12 -0
- package/dist/components/UnderlinePanels.d.ts.map +1 -0
- package/dist/components/deprecated/ActionList.d.ts +23 -0
- package/dist/components/deprecated/ActionList.d.ts.map +1 -0
- package/dist/components/deprecated/DialogV1.d.ts +11 -0
- package/dist/components/deprecated/DialogV1.d.ts.map +1 -0
- package/dist/components/deprecated/Octicon.d.ts +17 -0
- package/dist/components/deprecated/Octicon.d.ts.map +1 -0
- package/dist/components/deprecated/TabNav.d.ts +9 -0
- package/dist/components/deprecated/TabNav.d.ts.map +1 -0
- package/dist/components/deprecated/Tooltip.d.ts +13 -0
- package/dist/components/deprecated/Tooltip.d.ts.map +1 -0
- package/dist/components.json +59 -1
- package/dist/deprecated.d.ts +5 -1
- package/dist/deprecated.d.ts.map +1 -1
- package/dist/deprecated.js +179 -1
- package/dist/experimental.d.ts +4 -1
- package/dist/experimental.d.ts.map +1 -1
- package/dist/experimental.js +55 -5
- package/dist/index.d.ts +50 -81
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +480 -37
- package/dist/styled-props.d.ts +5 -0
- package/dist/styled-props.d.ts.map +1 -0
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,24 +1,255 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
3
|
-
import { forwardRef } from 'react';
|
|
1
|
+
import { ActionList as ActionList$1, sx, ActionMenu as ActionMenu$1, Autocomplete as Autocomplete$1, Box, Avatar as Avatar$1, Breadcrumbs as Breadcrumbs$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CircleBadge as CircleBadge$1, CounterLabel as CounterLabel$1, Flash as Flash$1, Header as Header$1, Heading as Heading$1, Label as Label$1, Link as Link$1, LinkButton as LinkButton$1, NavList as NavList$1, Overlay as Overlay$1, PageLayout as PageLayout$1, RadioGroup as RadioGroup$1, RelativeTime as RelativeTime$1, SegmentedControl as SegmentedControl$1, Spinner as Spinner$1, StateLabel as StateLabel$1, SubNav as SubNav$1, Text as Text$1, Timeline as Timeline$1, ToggleSwitch as ToggleSwitch$1, useTheme, theme, Token as Token$1, Truncate as Truncate$1, UnderlineNav as UnderlineNav$1 } from '@primer/react';
|
|
2
|
+
export { Box, Button, Details, FormControl, IconButton, ProgressBar, Select, TextInput, Textarea, ThemeProvider, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
|
|
3
|
+
import React, { forwardRef } from 'react';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
|
-
export { P as PageHeader } from './
|
|
6
|
+
export { D as Dialog, P as PageHeader, T as Tooltip } from './Tooltip-DIHgr01r.js';
|
|
7
|
+
import css from '@styled-system/css';
|
|
7
8
|
|
|
8
|
-
const
|
|
9
|
+
const StyledActionList = styled(ActionList$1).withConfig({
|
|
9
10
|
shouldForwardProp: prop => prop !== 'sx'
|
|
10
11
|
}).withConfig({
|
|
11
|
-
displayName: "
|
|
12
|
-
componentId: "sc-
|
|
12
|
+
displayName: "ActionList__StyledActionList",
|
|
13
|
+
componentId: "sc-hw2362-0"
|
|
14
|
+
})(["", ""], sx);
|
|
15
|
+
const ActionListImpl = /*#__PURE__*/React.forwardRef(function ActionListImpl({
|
|
16
|
+
as,
|
|
17
|
+
...rest
|
|
18
|
+
}, ref) {
|
|
19
|
+
return /*#__PURE__*/jsx(StyledActionList, {
|
|
20
|
+
ref: ref,
|
|
21
|
+
...rest,
|
|
22
|
+
...(as ? {
|
|
23
|
+
forwardedAs: as
|
|
24
|
+
} : {})
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
const ActionListLinkItem = styled(ActionList$1.LinkItem).withConfig({
|
|
28
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
29
|
+
}).withConfig({
|
|
30
|
+
displayName: "ActionList__ActionListLinkItem",
|
|
31
|
+
componentId: "sc-hw2362-1"
|
|
32
|
+
})(["", ""], sx);
|
|
33
|
+
const StyledActionListTrailingAction = styled(ActionList$1.TrailingAction).withConfig({
|
|
34
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
35
|
+
}).withConfig({
|
|
36
|
+
displayName: "ActionList__StyledActionListTrailingAction",
|
|
37
|
+
componentId: "sc-hw2362-2"
|
|
38
|
+
})(["", ""], sx);
|
|
39
|
+
const ActionListTrailingAction = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
40
|
+
const {
|
|
41
|
+
as,
|
|
42
|
+
...rest
|
|
43
|
+
} = props;
|
|
44
|
+
return /*#__PURE__*/jsx(StyledActionListTrailingAction, {
|
|
45
|
+
...rest,
|
|
46
|
+
...(as ? {
|
|
47
|
+
forwardedAs: as
|
|
48
|
+
} : {}),
|
|
49
|
+
ref: ref
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
const StyledActionListItem = styled(ActionList$1.Item).withConfig({
|
|
53
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
54
|
+
}).withConfig({
|
|
55
|
+
displayName: "ActionList__StyledActionListItem",
|
|
56
|
+
componentId: "sc-hw2362-3"
|
|
57
|
+
})(["", ""], sx);
|
|
58
|
+
const ActionListItem = /*#__PURE__*/React.forwardRef(({
|
|
59
|
+
children,
|
|
60
|
+
as,
|
|
61
|
+
...props
|
|
62
|
+
}, ref) => /*#__PURE__*/jsx(StyledActionListItem, {
|
|
63
|
+
ref: ref,
|
|
64
|
+
...props,
|
|
65
|
+
...(as ? {
|
|
66
|
+
forwardedAs: as
|
|
67
|
+
} : {}),
|
|
68
|
+
children: children
|
|
69
|
+
}));
|
|
70
|
+
const ActionListGroup = styled(ActionList$1.Group).withConfig({
|
|
71
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
72
|
+
}).withConfig({
|
|
73
|
+
displayName: "ActionList__ActionListGroup",
|
|
74
|
+
componentId: "sc-hw2362-4"
|
|
75
|
+
})(["", ""], sx);
|
|
76
|
+
const ActionListDivider = styled(ActionList$1.Divider).withConfig({
|
|
77
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
78
|
+
}).withConfig({
|
|
79
|
+
displayName: "ActionList__ActionListDivider",
|
|
80
|
+
componentId: "sc-hw2362-5"
|
|
13
81
|
})(["", ""], sx);
|
|
82
|
+
const ActionListLeadingVisual = styled(ActionList$1.LeadingVisual).withConfig({
|
|
83
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
84
|
+
}).withConfig({
|
|
85
|
+
displayName: "ActionList__ActionListLeadingVisual",
|
|
86
|
+
componentId: "sc-hw2362-6"
|
|
87
|
+
})(["", ""], sx);
|
|
88
|
+
const ActionListTrailingVisual = styled(ActionList$1.TrailingVisual).withConfig({
|
|
89
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
90
|
+
}).withConfig({
|
|
91
|
+
displayName: "ActionList__ActionListTrailingVisual",
|
|
92
|
+
componentId: "sc-hw2362-7"
|
|
93
|
+
})(["", ""], sx);
|
|
94
|
+
const ActionList = Object.assign(ActionListImpl, {
|
|
95
|
+
Item: ActionListItem,
|
|
96
|
+
LinkItem: ActionListLinkItem,
|
|
97
|
+
Group: ActionListGroup,
|
|
98
|
+
GroupHeading: ActionList$1.GroupHeading,
|
|
99
|
+
Divider: ActionListDivider,
|
|
100
|
+
Description: ActionList$1.Description,
|
|
101
|
+
LeadingVisual: ActionListLeadingVisual,
|
|
102
|
+
TrailingVisual: ActionListTrailingVisual,
|
|
103
|
+
Heading: ActionList$1.Heading,
|
|
104
|
+
TrailingAction: ActionListTrailingAction
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
const ActionMenuOverlay = styled(ActionMenu$1.Overlay).withConfig({
|
|
108
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
109
|
+
}).withConfig({
|
|
110
|
+
displayName: "ActionMenu__ActionMenuOverlay",
|
|
111
|
+
componentId: "sc-w5s60e-0"
|
|
112
|
+
})(["", ""], sx);
|
|
113
|
+
const ActionMenu = Object.assign(ActionMenu$1, {
|
|
114
|
+
Button: ActionMenu$1.Button,
|
|
115
|
+
Anchor: ActionMenu$1.Anchor,
|
|
116
|
+
Overlay: ActionMenuOverlay,
|
|
117
|
+
Divider: ActionMenu$1.Divider
|
|
118
|
+
});
|
|
14
119
|
|
|
15
|
-
const
|
|
120
|
+
const AutocompleteOverlay = styled(Autocomplete$1.Overlay).withConfig({
|
|
121
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
122
|
+
}).withConfig({
|
|
123
|
+
displayName: "Autocomplete__AutocompleteOverlay",
|
|
124
|
+
componentId: "sc-j8ax2e-0"
|
|
125
|
+
})(["", ""], sx);
|
|
126
|
+
const Autocomplete = Object.assign(Autocomplete$1, {
|
|
127
|
+
Context: Autocomplete$1.Context,
|
|
128
|
+
Input: Autocomplete$1.Input,
|
|
129
|
+
Menu: Autocomplete$1.Menu,
|
|
130
|
+
Overlay: AutocompleteOverlay
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
|
|
134
|
+
return /*#__PURE__*/jsx(Box, {
|
|
135
|
+
as: Avatar$1,
|
|
136
|
+
ref: ref,
|
|
137
|
+
...props
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
const BreadcrumbsImpl = styled(Breadcrumbs$1).withConfig({
|
|
142
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
143
|
+
}).withConfig({
|
|
144
|
+
displayName: "Breadcrumbs__BreadcrumbsImpl",
|
|
145
|
+
componentId: "sc-1qj8pw-0"
|
|
146
|
+
})(["", ""], sx);
|
|
147
|
+
const StyledBreadcrumbsItem = styled(Breadcrumbs$1.Item).withConfig({
|
|
148
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
149
|
+
}).withConfig({
|
|
150
|
+
displayName: "Breadcrumbs__StyledBreadcrumbsItem",
|
|
151
|
+
componentId: "sc-1qj8pw-1"
|
|
152
|
+
})(["", ""], sx);
|
|
153
|
+
function BreadcrumbsItem({
|
|
154
|
+
as,
|
|
155
|
+
...props
|
|
156
|
+
}) {
|
|
157
|
+
return /*#__PURE__*/jsx(StyledBreadcrumbsItem, {
|
|
158
|
+
...props,
|
|
159
|
+
...(as ? {
|
|
160
|
+
forwardedAs: as
|
|
161
|
+
} : {})
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
const Breadcrumbs = Object.assign(BreadcrumbsImpl, {
|
|
165
|
+
Item: BreadcrumbsItem
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
|
|
170
|
+
*/
|
|
171
|
+
const Breadcrumb = Breadcrumbs;
|
|
172
|
+
|
|
173
|
+
const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
|
|
174
|
+
return /*#__PURE__*/jsx(Box, {
|
|
175
|
+
as: Checkbox$1,
|
|
176
|
+
ref: ref,
|
|
177
|
+
...props
|
|
178
|
+
});
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
const CheckboxGroupImpl = props => {
|
|
182
|
+
return /*#__PURE__*/jsx(Box, {
|
|
183
|
+
as: CheckboxGroup$1,
|
|
184
|
+
...props
|
|
185
|
+
});
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
// Define local types based on the internal component props
|
|
189
|
+
|
|
190
|
+
const CheckboxOrRadioGroupLabel$1 = props => {
|
|
191
|
+
return /*#__PURE__*/jsx(Box, {
|
|
192
|
+
as: CheckboxGroup$1.Label,
|
|
193
|
+
...props
|
|
194
|
+
});
|
|
195
|
+
};
|
|
196
|
+
const CheckboxOrRadioGroupCaption$1 = props => {
|
|
197
|
+
return /*#__PURE__*/jsx(Box, {
|
|
198
|
+
as: CheckboxGroup$1.Caption,
|
|
199
|
+
...props
|
|
200
|
+
});
|
|
201
|
+
};
|
|
202
|
+
const CheckboxOrRadioGroupValidation$1 = props => {
|
|
203
|
+
return /*#__PURE__*/jsx(Box, {
|
|
204
|
+
as: CheckboxGroup$1.Validation,
|
|
205
|
+
...props
|
|
206
|
+
});
|
|
207
|
+
};
|
|
208
|
+
const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
|
|
209
|
+
Label: CheckboxOrRadioGroupLabel$1,
|
|
210
|
+
Caption: CheckboxOrRadioGroupCaption$1,
|
|
211
|
+
Validation: CheckboxOrRadioGroupValidation$1
|
|
212
|
+
});
|
|
213
|
+
|
|
214
|
+
const CircleBadge = styled(CircleBadge$1).withConfig({
|
|
215
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
216
|
+
}).withConfig({
|
|
217
|
+
displayName: "CircleBadge",
|
|
218
|
+
componentId: "sc-1u7lp3v-0"
|
|
219
|
+
})(["", ""], sx);
|
|
220
|
+
|
|
221
|
+
const CounterLabel = /*#__PURE__*/forwardRef(function CounterLabel(props, ref) {
|
|
222
|
+
return /*#__PURE__*/jsx(Box, {
|
|
223
|
+
as: CounterLabel$1,
|
|
224
|
+
ref: ref,
|
|
225
|
+
...props
|
|
226
|
+
});
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
const Flash = styled(Flash$1).withConfig({
|
|
230
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
231
|
+
}).withConfig({
|
|
232
|
+
displayName: "Flash",
|
|
233
|
+
componentId: "sc-413izo-0"
|
|
234
|
+
})(["", ""], sx);
|
|
235
|
+
|
|
236
|
+
const StyledHeader = /*#__PURE__*/forwardRef(function Header(props, ref) {
|
|
16
237
|
return /*#__PURE__*/jsx(Box, {
|
|
17
238
|
as: Header$1,
|
|
18
239
|
ref: ref,
|
|
19
240
|
...props
|
|
20
241
|
});
|
|
21
242
|
});
|
|
243
|
+
const HeaderImpl = /*#__PURE__*/forwardRef(({
|
|
244
|
+
as,
|
|
245
|
+
...props
|
|
246
|
+
}, ref) => /*#__PURE__*/jsx(StyledHeader, {
|
|
247
|
+
...props,
|
|
248
|
+
...(as ? {
|
|
249
|
+
forwardedAs: as
|
|
250
|
+
} : {}),
|
|
251
|
+
ref: ref
|
|
252
|
+
}));
|
|
22
253
|
const HeaderItem = /*#__PURE__*/forwardRef(function HeaderItem(props, ref) {
|
|
23
254
|
return /*#__PURE__*/jsx(Box, {
|
|
24
255
|
as: Header$1.Item,
|
|
@@ -26,38 +257,172 @@ const HeaderItem = /*#__PURE__*/forwardRef(function HeaderItem(props, ref) {
|
|
|
26
257
|
...props
|
|
27
258
|
});
|
|
28
259
|
});
|
|
29
|
-
const
|
|
260
|
+
const StyledHeaderLink = /*#__PURE__*/forwardRef(function HeaderLink(props, ref) {
|
|
30
261
|
return /*#__PURE__*/jsx(Box, {
|
|
31
262
|
as: Header$1.Link,
|
|
32
263
|
ref: ref,
|
|
33
264
|
...props
|
|
34
265
|
});
|
|
35
266
|
});
|
|
267
|
+
const HeaderLink = /*#__PURE__*/forwardRef(({
|
|
268
|
+
as,
|
|
269
|
+
...props
|
|
270
|
+
}, ref) => /*#__PURE__*/jsx(StyledHeaderLink, {
|
|
271
|
+
...props,
|
|
272
|
+
...(as ? {
|
|
273
|
+
forwardedAs: as
|
|
274
|
+
} : {}),
|
|
275
|
+
ref: ref
|
|
276
|
+
}));
|
|
36
277
|
const Header = Object.assign(HeaderImpl, {
|
|
37
278
|
Item: HeaderItem,
|
|
38
279
|
Link: HeaderLink
|
|
39
280
|
});
|
|
40
281
|
|
|
41
|
-
const
|
|
282
|
+
const Heading = styled(Heading$1).withConfig({
|
|
42
283
|
shouldForwardProp: prop => prop !== 'sx'
|
|
43
284
|
}).withConfig({
|
|
44
|
-
displayName: "
|
|
45
|
-
componentId: "sc-
|
|
285
|
+
displayName: "Heading",
|
|
286
|
+
componentId: "sc-1vc165i-0"
|
|
46
287
|
})(["", ""], sx);
|
|
47
288
|
|
|
48
|
-
function
|
|
289
|
+
const StyledLabel = /*#__PURE__*/forwardRef(function Label(props, ref) {
|
|
49
290
|
return /*#__PURE__*/jsx(Box, {
|
|
50
|
-
as:
|
|
291
|
+
as: Label$1,
|
|
292
|
+
ref: ref,
|
|
51
293
|
...props
|
|
52
294
|
});
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
295
|
+
});
|
|
296
|
+
const Label = /*#__PURE__*/forwardRef(({
|
|
297
|
+
as,
|
|
298
|
+
...props
|
|
299
|
+
}, ref) => {
|
|
300
|
+
return /*#__PURE__*/jsx(StyledLabel, {
|
|
301
|
+
...props,
|
|
302
|
+
...(as ? {
|
|
303
|
+
forwardedAs: as
|
|
304
|
+
} : {}),
|
|
305
|
+
ref: ref
|
|
306
|
+
});
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
const StyledLink = styled(Link$1).withConfig({
|
|
310
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
311
|
+
}).withConfig({
|
|
312
|
+
displayName: "Link__StyledLink",
|
|
313
|
+
componentId: "sc-1syctfj-0"
|
|
314
|
+
})(["", ""], sx);
|
|
315
|
+
const Link = /*#__PURE__*/forwardRef(({
|
|
316
|
+
as,
|
|
317
|
+
...props
|
|
318
|
+
}, ref) => {
|
|
319
|
+
return /*#__PURE__*/jsx(StyledLink, {
|
|
320
|
+
...props,
|
|
321
|
+
...(as ? {
|
|
322
|
+
forwardedAs: as
|
|
323
|
+
} : {}),
|
|
324
|
+
ref: ref
|
|
325
|
+
});
|
|
326
|
+
});
|
|
327
|
+
|
|
328
|
+
const LinkButton = styled(LinkButton$1).withConfig({
|
|
329
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
330
|
+
}).withConfig({
|
|
331
|
+
displayName: "LinkButton",
|
|
332
|
+
componentId: "sc-1v6zkmg-0"
|
|
333
|
+
})(["", ""], sx);
|
|
334
|
+
|
|
335
|
+
const NavListImpl = /*#__PURE__*/forwardRef(function NavList(props, ref) {
|
|
56
336
|
return /*#__PURE__*/jsx(Box, {
|
|
57
|
-
as:
|
|
337
|
+
as: NavList$1,
|
|
338
|
+
ref: ref,
|
|
58
339
|
...props
|
|
59
340
|
});
|
|
60
|
-
}
|
|
341
|
+
});
|
|
342
|
+
const NavListItem = /*#__PURE__*/forwardRef(function NavListItem(props, ref) {
|
|
343
|
+
// @ts-expect-error - PrimerNavList.Item is not recognized as a valid component type
|
|
344
|
+
return /*#__PURE__*/jsx(Box, {
|
|
345
|
+
as: NavList$1.Item,
|
|
346
|
+
ref: ref,
|
|
347
|
+
...props
|
|
348
|
+
});
|
|
349
|
+
});
|
|
350
|
+
const NavListGroup = /*#__PURE__*/forwardRef(function NavListGroup(props, ref) {
|
|
351
|
+
// @ts-expect-error - PrimerNavList.Group is not recognized as a valid component type
|
|
352
|
+
return /*#__PURE__*/jsx(Box, {
|
|
353
|
+
as: NavList$1.Group,
|
|
354
|
+
ref: ref,
|
|
355
|
+
...props
|
|
356
|
+
});
|
|
357
|
+
});
|
|
358
|
+
const NavListGroupHeading = /*#__PURE__*/forwardRef(function NavListGroupHeading(props, ref) {
|
|
359
|
+
// @ts-expect-error - PrimerNavList.GroupHeading is not recognized as a valid component type
|
|
360
|
+
return /*#__PURE__*/jsx(Box, {
|
|
361
|
+
as: NavList$1.GroupHeading,
|
|
362
|
+
ref: ref,
|
|
363
|
+
...props
|
|
364
|
+
});
|
|
365
|
+
});
|
|
366
|
+
const NavListLeadingVisual = /*#__PURE__*/forwardRef(function NavListLeadingVisual(props, ref) {
|
|
367
|
+
// @ts-expect-error - PrimerNavList.LeadingVisual is not recognized as a valid component type
|
|
368
|
+
return /*#__PURE__*/jsx(Box, {
|
|
369
|
+
as: NavList$1.LeadingVisual,
|
|
370
|
+
ref: ref,
|
|
371
|
+
...props
|
|
372
|
+
});
|
|
373
|
+
});
|
|
374
|
+
const NavList = Object.assign(NavListImpl, {
|
|
375
|
+
Item: NavListItem,
|
|
376
|
+
Group: NavListGroup,
|
|
377
|
+
GroupHeading: NavListGroupHeading,
|
|
378
|
+
LeadingVisual: NavListLeadingVisual,
|
|
379
|
+
SubNav: NavList$1.SubNav,
|
|
380
|
+
Divider: NavList$1.Divider,
|
|
381
|
+
TrailingVisual: NavList$1.TrailingVisual,
|
|
382
|
+
TrailingAction: NavList$1.TrailingAction,
|
|
383
|
+
GroupExpand: NavList$1.GroupExpand
|
|
384
|
+
});
|
|
385
|
+
|
|
386
|
+
const Overlay = styled(Overlay$1).withConfig({
|
|
387
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
388
|
+
}).withConfig({
|
|
389
|
+
displayName: "Overlay",
|
|
390
|
+
componentId: "sc-tjbd74-0"
|
|
391
|
+
})(["", ""], sx);
|
|
392
|
+
|
|
393
|
+
const Wrapper = styled.div.withConfig({
|
|
394
|
+
displayName: "PageLayout__Wrapper",
|
|
395
|
+
componentId: "sc-pjybtc-0"
|
|
396
|
+
})(["", ""], sx);
|
|
397
|
+
const PageLayoutImpl = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
398
|
+
// @ts-expect-error - PrimerPageLayout is not recognized as a valid component type
|
|
399
|
+
return /*#__PURE__*/jsx(Wrapper, {
|
|
400
|
+
as: PageLayout$1,
|
|
401
|
+
ref: ref,
|
|
402
|
+
...props
|
|
403
|
+
});
|
|
404
|
+
});
|
|
405
|
+
const PageLayoutContent = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
406
|
+
return /*#__PURE__*/jsx(Wrapper, {
|
|
407
|
+
as: PageLayout$1.Content,
|
|
408
|
+
ref: ref,
|
|
409
|
+
...props
|
|
410
|
+
});
|
|
411
|
+
});
|
|
412
|
+
const PageLayoutPane = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
413
|
+
return /*#__PURE__*/jsx(Wrapper, {
|
|
414
|
+
as: PageLayout$1.Pane,
|
|
415
|
+
ref: ref,
|
|
416
|
+
...props
|
|
417
|
+
});
|
|
418
|
+
});
|
|
419
|
+
const PageLayout = Object.assign(PageLayoutImpl, {
|
|
420
|
+
Content: PageLayoutContent,
|
|
421
|
+
Header: PageLayout$1.Header,
|
|
422
|
+
Pane: PageLayoutPane,
|
|
423
|
+
Footer: PageLayout$1.Footer
|
|
424
|
+
});
|
|
425
|
+
|
|
61
426
|
const RadioGroupImpl = props => {
|
|
62
427
|
return /*#__PURE__*/jsx(Box, {
|
|
63
428
|
as: RadioGroup$1,
|
|
@@ -90,6 +455,15 @@ const RadioGroup = Object.assign(RadioGroupImpl, {
|
|
|
90
455
|
Caption: CheckboxOrRadioGroupCaption,
|
|
91
456
|
Validation: CheckboxOrRadioGroupValidation
|
|
92
457
|
});
|
|
458
|
+
|
|
459
|
+
function RelativeTime(props) {
|
|
460
|
+
// @ts-expect-error the types for Box are not correctly inferred here
|
|
461
|
+
return /*#__PURE__*/jsx(Box, {
|
|
462
|
+
as: RelativeTime$1,
|
|
463
|
+
...props
|
|
464
|
+
});
|
|
465
|
+
}
|
|
466
|
+
|
|
93
467
|
const SegmentedControlButton = props => {
|
|
94
468
|
return /*#__PURE__*/jsx(Box, {
|
|
95
469
|
as: SegmentedControl$1.Button,
|
|
@@ -112,20 +486,14 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, {
|
|
|
112
486
|
Button: SegmentedControlButton,
|
|
113
487
|
IconButton: SegmentedControlIconButton
|
|
114
488
|
});
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
as: Checkbox$1,
|
|
118
|
-
ref: ref,
|
|
119
|
-
...props
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
|
-
const CounterLabel = /*#__PURE__*/forwardRef(function CounterLabel(props, ref) {
|
|
489
|
+
|
|
490
|
+
function Spinner(props) {
|
|
123
491
|
return /*#__PURE__*/jsx(Box, {
|
|
124
|
-
as:
|
|
125
|
-
ref: ref,
|
|
492
|
+
as: Spinner$1,
|
|
126
493
|
...props
|
|
127
494
|
});
|
|
128
|
-
}
|
|
495
|
+
}
|
|
496
|
+
|
|
129
497
|
const StateLabel = /*#__PURE__*/forwardRef(function StateLabel(props, ref) {
|
|
130
498
|
return /*#__PURE__*/jsx(Box, {
|
|
131
499
|
as: StateLabel$1,
|
|
@@ -133,6 +501,7 @@ const StateLabel = /*#__PURE__*/forwardRef(function StateLabel(props, ref) {
|
|
|
133
501
|
...props
|
|
134
502
|
});
|
|
135
503
|
});
|
|
504
|
+
|
|
136
505
|
const SubNavImpl = /*#__PURE__*/forwardRef(function SubNav(props, ref) {
|
|
137
506
|
return /*#__PURE__*/jsx(Box, {
|
|
138
507
|
as: SubNav$1,
|
|
@@ -150,6 +519,27 @@ const SubNavLink = /*#__PURE__*/forwardRef(function SubNavLink(props, ref) {
|
|
|
150
519
|
const SubNav = Object.assign(SubNavImpl, {
|
|
151
520
|
Link: SubNavLink
|
|
152
521
|
});
|
|
522
|
+
|
|
523
|
+
const StyledText = styled(Text$1).withConfig({
|
|
524
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
525
|
+
}).withConfig({
|
|
526
|
+
displayName: "Text__StyledText",
|
|
527
|
+
componentId: "sc-1klmep6-0"
|
|
528
|
+
})(["", ""], sx);
|
|
529
|
+
const Text = /*#__PURE__*/forwardRef(({
|
|
530
|
+
as,
|
|
531
|
+
...props
|
|
532
|
+
}, ref) => {
|
|
533
|
+
return /*#__PURE__*/jsx(StyledText, {
|
|
534
|
+
...props,
|
|
535
|
+
...(as ? {
|
|
536
|
+
forwardedAs: as
|
|
537
|
+
} : {}),
|
|
538
|
+
ref: ref
|
|
539
|
+
});
|
|
540
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
541
|
+
});
|
|
542
|
+
|
|
153
543
|
const TimelineImpl = /*#__PURE__*/forwardRef(function Timeline(props, ref) {
|
|
154
544
|
return /*#__PURE__*/jsx(Box, {
|
|
155
545
|
as: Timeline$1,
|
|
@@ -190,6 +580,7 @@ const Timeline = Object.assign(TimelineImpl, {
|
|
|
190
580
|
Body: TimelineBody,
|
|
191
581
|
Break: TimelineBreak
|
|
192
582
|
});
|
|
583
|
+
|
|
193
584
|
const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
|
|
194
585
|
return /*#__PURE__*/jsx(Box, {
|
|
195
586
|
as: ToggleSwitch$1,
|
|
@@ -197,27 +588,79 @@ const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
|
|
|
197
588
|
...props
|
|
198
589
|
});
|
|
199
590
|
});
|
|
591
|
+
|
|
592
|
+
const Token = /*#__PURE__*/React.forwardRef(({
|
|
593
|
+
sx: sxProp,
|
|
594
|
+
style,
|
|
595
|
+
...rest
|
|
596
|
+
}, ref) => {
|
|
597
|
+
const contextTheme = useTheme();
|
|
598
|
+
const theme$1 = contextTheme.theme || theme;
|
|
599
|
+
|
|
600
|
+
// If no sx prop is provided, just return PrimerToken directly
|
|
601
|
+
if (!sxProp) {
|
|
602
|
+
return /*#__PURE__*/jsx(Token$1, {
|
|
603
|
+
...rest,
|
|
604
|
+
style: style,
|
|
605
|
+
ref: ref
|
|
606
|
+
});
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
// Convert sx to CSS styles using the theme context
|
|
610
|
+
const sxStyles = css(sxProp)(theme$1);
|
|
611
|
+
const mergedStyle = {
|
|
612
|
+
...sxStyles,
|
|
613
|
+
...style
|
|
614
|
+
};
|
|
615
|
+
return /*#__PURE__*/jsx(Token$1, {
|
|
616
|
+
...rest,
|
|
617
|
+
style: mergedStyle,
|
|
618
|
+
ref: ref
|
|
619
|
+
});
|
|
620
|
+
});
|
|
621
|
+
|
|
200
622
|
const Truncate = styled(Truncate$1).withConfig({
|
|
201
623
|
shouldForwardProp: prop => prop !== 'sx'
|
|
202
624
|
}).withConfig({
|
|
203
|
-
displayName: "
|
|
204
|
-
componentId: "sc-
|
|
625
|
+
displayName: "Truncate",
|
|
626
|
+
componentId: "sc-x3i4it-0"
|
|
205
627
|
})(["", ""], sx);
|
|
206
|
-
|
|
628
|
+
|
|
629
|
+
const StyledUnderlineNav = /*#__PURE__*/forwardRef(function UnderlineNav(props, ref) {
|
|
207
630
|
return /*#__PURE__*/jsx(Box, {
|
|
208
631
|
as: UnderlineNav$1,
|
|
209
632
|
ref: ref,
|
|
210
633
|
...props
|
|
211
634
|
});
|
|
212
635
|
});
|
|
213
|
-
const
|
|
636
|
+
const UnderlineNavImpl = /*#__PURE__*/forwardRef(({
|
|
637
|
+
as,
|
|
638
|
+
...props
|
|
639
|
+
}, ref) => /*#__PURE__*/jsx(StyledUnderlineNav, {
|
|
640
|
+
...props,
|
|
641
|
+
...(as ? {
|
|
642
|
+
forwardedAs: as
|
|
643
|
+
} : {}),
|
|
644
|
+
ref: ref
|
|
645
|
+
}));
|
|
646
|
+
const StyledUnderlineNavItem = styled(UnderlineNav$1.Item).withConfig({
|
|
214
647
|
shouldForwardProp: prop => prop !== 'sx'
|
|
215
648
|
}).withConfig({
|
|
216
|
-
displayName: "
|
|
217
|
-
componentId: "sc-
|
|
649
|
+
displayName: "UnderlineNav__StyledUnderlineNavItem",
|
|
650
|
+
componentId: "sc-dx6br2-0"
|
|
218
651
|
})(["", ""], sx);
|
|
652
|
+
const UnderlineNavItem = /*#__PURE__*/forwardRef(({
|
|
653
|
+
as,
|
|
654
|
+
...props
|
|
655
|
+
}, ref) => /*#__PURE__*/jsx(StyledUnderlineNavItem, {
|
|
656
|
+
...props,
|
|
657
|
+
...(as ? {
|
|
658
|
+
forwardedAs: as
|
|
659
|
+
} : {}),
|
|
660
|
+
ref: ref
|
|
661
|
+
}));
|
|
219
662
|
const UnderlineNav = Object.assign(UnderlineNavImpl, {
|
|
220
663
|
Item: UnderlineNavItem
|
|
221
664
|
});
|
|
222
665
|
|
|
223
|
-
export { Checkbox, CounterLabel, Flash, Header, LinkButton, RadioGroup, RelativeTime, SegmentedControl, Spinner, StateLabel, SubNav, Timeline, ToggleSwitch, Truncate, UnderlineNav };
|
|
666
|
+
export { ActionList, ActionMenu, Autocomplete, Avatar, Breadcrumb, Breadcrumbs, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Flash, Header, Heading, Label, Link, LinkButton, NavList, Overlay, PageLayout, RadioGroup, RelativeTime, SegmentedControl, Spinner, StateLabel, SubNav, Text, Timeline, ToggleSwitch, Token, Truncate, UnderlineNav };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
|
|
2
|
+
import type { SxProp } from './sx';
|
|
3
|
+
export type StyledProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
|
|
4
|
+
export type { BetterSystemStyleObject } from '@primer/react';
|
|
5
|
+
//# sourceMappingURL=styled-props.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled-props.d.ts","sourceRoot":"","sources":["../src/styled-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EAChB,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,MAAM,CAAA;AAEhC,MAAM,MAAM,WAAW,GAAG,MAAM,GAC9B,UAAU,GACV,UAAU,GACV,eAAe,GACf,WAAW,GACX,YAAY,GACZ,SAAS,GACT,eAAe,GACf,WAAW,GACX,aAAa,GACb,WAAW,CAAA;AAEb,YAAY,EAAC,uBAAuB,EAAC,MAAM,eAAe,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/styled-react",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-20251007223355",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@babel/preset-react": "^7.27.1",
|
|
32
32
|
"@babel/preset-typescript": "^7.27.1",
|
|
33
|
-
"@primer/react": "0.0.0-
|
|
33
|
+
"@primer/react": "0.0.0-20251007223355",
|
|
34
34
|
"@rollup/plugin-babel": "^6.0.4",
|
|
35
35
|
"@types/react": "18.3.11",
|
|
36
36
|
"@types/react-dom": "18.3.1",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"typescript": "^5.9.2"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"@primer/react": "0.0.0-
|
|
49
|
+
"@primer/react": "0.0.0-20251007223355",
|
|
50
50
|
"@types/react": "18.x || 19.x",
|
|
51
51
|
"@types/react-dom": "18.x || 19.x",
|
|
52
52
|
"@types/react-is": "18.x || 19.x",
|