@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.
Files changed (89) hide show
  1. package/dist/{PageHeader-BYlYLcfB.js → Tooltip-DIHgr01r.js} +77 -11
  2. package/dist/components/ActionList.d.ts +36 -0
  3. package/dist/components/ActionList.d.ts.map +1 -0
  4. package/dist/components/ActionMenu.d.ts +12 -0
  5. package/dist/components/ActionMenu.d.ts.map +1 -0
  6. package/dist/components/Autocomplete.d.ts +15 -0
  7. package/dist/components/Autocomplete.d.ts.map +1 -0
  8. package/dist/components/Avatar.d.ts +13 -0
  9. package/dist/components/Avatar.d.ts.map +1 -0
  10. package/dist/components/Breadcrumbs.d.ts +18 -0
  11. package/dist/components/Breadcrumbs.d.ts.map +1 -0
  12. package/dist/components/Checkbox.d.ts +5 -0
  13. package/dist/components/Checkbox.d.ts.map +1 -0
  14. package/dist/components/CheckboxGroup.d.ts +22 -0
  15. package/dist/components/CheckboxGroup.d.ts.map +1 -0
  16. package/dist/components/CircleBadge.d.ts +7 -0
  17. package/dist/components/CircleBadge.d.ts.map +1 -0
  18. package/dist/components/CounterLabel.d.ts +10 -0
  19. package/dist/components/CounterLabel.d.ts.map +1 -0
  20. package/dist/components/DataTable.d.ts +11 -0
  21. package/dist/components/DataTable.d.ts.map +1 -0
  22. package/dist/components/Dialog.d.ts +19 -0
  23. package/dist/components/Dialog.d.ts.map +1 -0
  24. package/dist/components/Header.d.ts.map +1 -1
  25. package/dist/components/Heading.d.ts +8 -0
  26. package/dist/components/Heading.d.ts.map +1 -0
  27. package/dist/components/Label.d.ts +9 -0
  28. package/dist/components/Label.d.ts.map +1 -0
  29. package/dist/components/Link.d.ts +7 -0
  30. package/dist/components/Link.d.ts.map +1 -0
  31. package/dist/components/NavList.d.ts +33 -0
  32. package/dist/components/NavList.d.ts.map +1 -0
  33. package/dist/components/Overlay.d.ts +7 -0
  34. package/dist/components/Overlay.d.ts.map +1 -0
  35. package/dist/components/PageHeader.d.ts +18 -14
  36. package/dist/components/PageHeader.d.ts.map +1 -1
  37. package/dist/components/PageLayout.d.ts +18 -0
  38. package/dist/components/PageLayout.d.ts.map +1 -0
  39. package/dist/components/RadioGroup.d.ts +22 -0
  40. package/dist/components/RadioGroup.d.ts.map +1 -0
  41. package/dist/components/RelativeTime.d.ts +6 -0
  42. package/dist/components/RelativeTime.d.ts.map +1 -0
  43. package/dist/components/SegmentedControl.d.ts +12 -0
  44. package/dist/components/SegmentedControl.d.ts.map +1 -0
  45. package/dist/components/Spinner.d.ts +6 -0
  46. package/dist/components/Spinner.d.ts.map +1 -0
  47. package/dist/components/StateLabel.d.ts +9 -0
  48. package/dist/components/StateLabel.d.ts.map +1 -0
  49. package/dist/components/SubNav.d.ts +9 -0
  50. package/dist/components/SubNav.d.ts.map +1 -0
  51. package/dist/components/Text.d.ts +7 -0
  52. package/dist/components/Text.d.ts.map +1 -0
  53. package/dist/components/Timeline.d.ts +26 -0
  54. package/dist/components/Timeline.d.ts.map +1 -0
  55. package/dist/components/ToggleSwitch.d.ts +6 -0
  56. package/dist/components/ToggleSwitch.d.ts.map +1 -0
  57. package/dist/components/Token.d.ts +7 -0
  58. package/dist/components/Token.d.ts.map +1 -0
  59. package/dist/components/Tooltip.d.ts +6 -0
  60. package/dist/components/Tooltip.d.ts.map +1 -0
  61. package/dist/components/Truncate.d.ts +7 -0
  62. package/dist/components/Truncate.d.ts.map +1 -0
  63. package/dist/components/UnderlineNav.d.ts +11 -0
  64. package/dist/components/UnderlineNav.d.ts.map +1 -0
  65. package/dist/components/UnderlinePanels.d.ts +12 -0
  66. package/dist/components/UnderlinePanels.d.ts.map +1 -0
  67. package/dist/components/deprecated/ActionList.d.ts +23 -0
  68. package/dist/components/deprecated/ActionList.d.ts.map +1 -0
  69. package/dist/components/deprecated/DialogV1.d.ts +11 -0
  70. package/dist/components/deprecated/DialogV1.d.ts.map +1 -0
  71. package/dist/components/deprecated/Octicon.d.ts +17 -0
  72. package/dist/components/deprecated/Octicon.d.ts.map +1 -0
  73. package/dist/components/deprecated/TabNav.d.ts +9 -0
  74. package/dist/components/deprecated/TabNav.d.ts.map +1 -0
  75. package/dist/components/deprecated/Tooltip.d.ts +13 -0
  76. package/dist/components/deprecated/Tooltip.d.ts.map +1 -0
  77. package/dist/components.json +59 -1
  78. package/dist/deprecated.d.ts +5 -1
  79. package/dist/deprecated.d.ts.map +1 -1
  80. package/dist/deprecated.js +179 -1
  81. package/dist/experimental.d.ts +4 -1
  82. package/dist/experimental.d.ts.map +1 -1
  83. package/dist/experimental.js +55 -5
  84. package/dist/index.d.ts +50 -81
  85. package/dist/index.d.ts.map +1 -1
  86. package/dist/index.js +480 -37
  87. package/dist/styled-props.d.ts +5 -0
  88. package/dist/styled-props.d.ts.map +1 -0
  89. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,24 +1,255 @@
1
- import { LinkButton as LinkButton$1, sx, Box, Header as Header$1, Flash as Flash$1, Truncate as Truncate$1, UnderlineNav as UnderlineNav$1, RadioGroup as RadioGroup$1, SegmentedControl as SegmentedControl$1, SubNav as SubNav$1, Timeline as Timeline$1, Checkbox as Checkbox$1, CounterLabel as CounterLabel$1, RelativeTime as RelativeTime$1, Spinner as Spinner$1, StateLabel as StateLabel$1, ToggleSwitch as ToggleSwitch$1 } from '@primer/react';
2
- export { ActionList, ActionMenu, Autocomplete, Avatar, Box, Breadcrumbs, Button, CheckboxGroup, CircleBadge, Details, Dialog, FormControl, Heading, IconButton, Label, Link, NavList, Overlay, PageLayout, Select, Text, TextInput, Textarea, ThemeProvider, Token, Tooltip, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
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 './PageHeader-BYlYLcfB.js';
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 LinkButton = styled(LinkButton$1).withConfig({
9
+ const StyledActionList = styled(ActionList$1).withConfig({
9
10
  shouldForwardProp: prop => prop !== 'sx'
10
11
  }).withConfig({
11
- displayName: "LinkButton",
12
- componentId: "sc-1v6zkmg-0"
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 HeaderImpl = /*#__PURE__*/forwardRef(function Header(props, ref) {
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 HeaderLink = /*#__PURE__*/forwardRef(function HeaderLink(props, ref) {
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 Flash = styled(Flash$1).withConfig({
282
+ const Heading = styled(Heading$1).withConfig({
42
283
  shouldForwardProp: prop => prop !== 'sx'
43
284
  }).withConfig({
44
- displayName: "Flash",
45
- componentId: "sc-413izo-0"
285
+ displayName: "Heading",
286
+ componentId: "sc-1vc165i-0"
46
287
  })(["", ""], sx);
47
288
 
48
- function Spinner(props) {
289
+ const StyledLabel = /*#__PURE__*/forwardRef(function Label(props, ref) {
49
290
  return /*#__PURE__*/jsx(Box, {
50
- as: Spinner$1,
291
+ as: Label$1,
292
+ ref: ref,
51
293
  ...props
52
294
  });
53
- }
54
- function RelativeTime(props) {
55
- // @ts-expect-error the types for Box are not correctly inferred here
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: RelativeTime$1,
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
- const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
116
- return /*#__PURE__*/jsx(Box, {
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: CounterLabel$1,
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: "src__Truncate",
204
- componentId: "sc-1hfjsa7-0"
625
+ displayName: "Truncate",
626
+ componentId: "sc-x3i4it-0"
205
627
  })(["", ""], sx);
206
- const UnderlineNavImpl = /*#__PURE__*/forwardRef(function UnderlineNav(props, ref) {
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 UnderlineNavItem = styled(UnderlineNav$1.Item).withConfig({
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: "src__UnderlineNavItem",
217
- componentId: "sc-1hfjsa7-1"
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-20251007221437",
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-20251007221437",
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-20251007221437",
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",