@primer/styled-react 0.0.0-20251008165103 → 0.0.0-20251008165550
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/components/FormControl.d.ts +12 -0
- package/dist/components/FormControl.d.ts.map +1 -0
- package/dist/components/PageHeader.d.ts.map +1 -1
- package/dist/components.json +1 -3
- package/dist/index.d.ts +5 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +16 -170
- package/dist/sx.d.ts +0 -3
- package/dist/sx.d.ts.map +1 -1
- package/package.json +3 -3
- package/dist/components/Button.d.ts +0 -13
- package/dist/components/Button.d.ts.map +0 -1
- package/dist/components/IconButton.d.ts +0 -9
- package/dist/components/IconButton.d.ts.map +0 -1
- package/dist/components/TextInput.d.ts +0 -20
- package/dist/components/TextInput.d.ts.map +0 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FormControl as PrimerFormControl, type FormControlProps as PrimerFormControlProps, type SxProp } from '@primer/react';
|
|
2
|
+
import { type PropsWithChildren } from 'react';
|
|
3
|
+
type FormControlProps = PropsWithChildren<PrimerFormControlProps> & SxProp;
|
|
4
|
+
declare const FormControlImpl: React.ComponentType<FormControlProps>;
|
|
5
|
+
declare const FormControl: typeof FormControlImpl & {
|
|
6
|
+
Caption: typeof PrimerFormControl.Caption;
|
|
7
|
+
LeadingVisual: typeof PrimerFormControl.LeadingVisual;
|
|
8
|
+
Validation: typeof PrimerFormControl.Validation;
|
|
9
|
+
Label: typeof PrimerFormControl.Label;
|
|
10
|
+
};
|
|
11
|
+
export { FormControl, type FormControlProps };
|
|
12
|
+
//# sourceMappingURL=FormControl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../src/components/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,iBAAiB,EAChC,KAAK,gBAAgB,IAAI,sBAAsB,EAC/C,KAAK,MAAM,EACZ,MAAM,eAAe,CAAA;AACtB,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI5C,KAAK,gBAAgB,GAAG,iBAAiB,CAAC,sBAAsB,CAAC,GAAG,MAAM,CAAA;AAE1E,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAI1D,CAAA;AAED,QAAA,MAAM,WAAW,EAKX,OAAO,eAAe,GAAG;IAC7B,OAAO,EAAE,OAAO,iBAAiB,CAAC,OAAO,CAAA;IACzC,aAAa,EAAE,OAAO,iBAAiB,CAAC,aAAa,CAAA;IACrD,UAAU,EAAE,OAAO,iBAAiB,CAAC,UAAU,CAAA;IAC/C,KAAK,EAAE,OAAO,iBAAiB,CAAC,KAAK,CAAA;CACtC,CAAA;AAED,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/components/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,gBAAgB,EAC9B,KAAK,eAAe,IAAI,qBAAqB,EAC7C,KAAK,oBAAoB,IAAI,0BAA0B,EACvD,KAAK,sBAAsB,IAAI,4BAA4B,EAC3D,KAAK,wBAAwB,IAAI,8BAA8B,EAChE,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAK,KAAK,MAAM,
|
|
1
|
+
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/components/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,gBAAgB,EAC9B,KAAK,eAAe,IAAI,qBAAqB,EAC7C,KAAK,oBAAoB,IAAI,0BAA0B,EACvD,KAAK,sBAAsB,IAAI,4BAA4B,EAC3D,KAAK,wBAAwB,IAAI,8BAA8B,EAChE,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAEvD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,eAAe,GAAG,qBAAqB,GAAG,MAAM,CAAA;AAcrD,KAAK,sBAAsB,GAAG,4BAA4B,GAAG,MAAM,CAAA;AAEnE,iBAAS,iBAAiB,CAAC,EAAC,EAAE,EAAE,GAAG,IAAI,EAAC,EAAE,sBAAsB,qBAY/D;AAED,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,0BAA0B,CAAC,GAAG,MAAM,CAAA;AA4BlF,QAAA,MAAM,eAAe,GAAI,kBAAgB,oBAAoB,sBAE5D,CAAA;AAED,KAAK,wBAAwB,GAAG,iBAAiB,CAAC,8BAA8B,CAAC,GAAG,MAAM,CAAA;AAE1F,QAAA,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,CAM7E,CAAA;AAED,KAAK,uBAAuB,GAAG,mBAAmB,CAAC,KAAK,EAAE,eAAe,CAAC,GAAG;IAC3E,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,WAAW,EAAE,OAAO,gBAAgB,CAAC,WAAW,CAAA;IAChD,UAAU,EAAE,OAAO,gBAAgB,CAAC,UAAU,CAAA;IAC9C,UAAU,EAAE,OAAO,gBAAgB,CAAC,UAAU,CAAA;IAC9C,SAAS,EAAE,OAAO,mBAAmB,CAAA;IACrC,kBAAkB,EAAE,OAAO,gBAAgB,CAAC,kBAAkB,CAAA;IAC9D,aAAa,EAAE,OAAO,gBAAgB,CAAC,aAAa,CAAA;IACpD,WAAW,EAAE,OAAO,gBAAgB,CAAC,WAAW,CAAA;IAChD,aAAa,EAAE,OAAO,gBAAgB,CAAC,aAAa,CAAA;IACpD,KAAK,EAAE,OAAO,eAAe,CAAA;IAC7B,cAAc,EAAE,OAAO,gBAAgB,CAAC,cAAc,CAAA;IACtD,WAAW,EAAE,OAAO,gBAAgB,CAAC,WAAW,CAAA;IAChD,cAAc,EAAE,OAAO,gBAAgB,CAAC,cAAc,CAAA;CACvD,CAAA;AAED,QAAA,MAAM,UAAU,EAAE,uBAchB,CAAA;AAEF,OAAO,EAAC,UAAU,EAAC,CAAA;AACnB,YAAY,EAAC,eAAe,EAAE,sBAAsB,EAAE,oBAAoB,EAAC,CAAA"}
|
package/dist/components.json
CHANGED
|
@@ -64,15 +64,14 @@
|
|
|
64
64
|
"BoxProps",
|
|
65
65
|
"BreadcrumbsItemProps",
|
|
66
66
|
"BreadcrumbsProps",
|
|
67
|
-
"ButtonProps",
|
|
68
67
|
"CheckboxGroupProps",
|
|
69
68
|
"CheckboxProps",
|
|
70
69
|
"CounterLabelProps",
|
|
71
70
|
"DataTableContainerProps",
|
|
72
71
|
"DialogHeaderProps",
|
|
73
72
|
"DialogProps",
|
|
73
|
+
"FormControlProps",
|
|
74
74
|
"HeaderProps",
|
|
75
|
-
"IconButtonProps",
|
|
76
75
|
"LabelProps",
|
|
77
76
|
"LinkButtonProps",
|
|
78
77
|
"LinkProps",
|
|
@@ -103,7 +102,6 @@
|
|
|
103
102
|
"TableTitleProps",
|
|
104
103
|
"TabNavLinkProps",
|
|
105
104
|
"TabNavProps",
|
|
106
|
-
"TextInputActionProps",
|
|
107
105
|
"TextInputProps",
|
|
108
106
|
"TextProps",
|
|
109
107
|
"TimelineBadgeProps",
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
export { Box, type BoxProps } from './components/Box';
|
|
2
|
+
export { Button } from '@primer/react';
|
|
2
3
|
export { Details } from '@primer/react';
|
|
3
|
-
export {
|
|
4
|
+
export { IconButton } from '@primer/react';
|
|
4
5
|
export { ProgressBar } from '@primer/react';
|
|
5
6
|
export { Select } from '@primer/react';
|
|
6
7
|
export { Textarea } from '@primer/react';
|
|
8
|
+
export { TextInput } from '@primer/react';
|
|
9
|
+
export { type TextInputProps } from '@primer/react';
|
|
7
10
|
export { ThemeProvider } from '@primer/react';
|
|
8
11
|
export { merge } from '@primer/react';
|
|
9
12
|
export { theme } from '@primer/react';
|
|
@@ -15,16 +18,15 @@ export { ActionMenu } from './components/ActionMenu';
|
|
|
15
18
|
export { Autocomplete, type AutocompleteOverlayProps } from './components/Autocomplete';
|
|
16
19
|
export { Avatar, type AvatarProps } from './components/Avatar';
|
|
17
20
|
export { Breadcrumbs, Breadcrumb, type BreadcrumbsProps, type BreadcrumbsItemProps } from './components/Breadcrumbs';
|
|
18
|
-
export { ButtonComponent as Button, type ButtonComponentProps as ButtonProps } from './components/Button';
|
|
19
21
|
export { Checkbox, type CheckboxProps } from './components/Checkbox';
|
|
20
22
|
export { CheckboxGroup, type CheckboxGroupProps } from './components/CheckboxGroup';
|
|
21
23
|
export { CircleBadge } from './components/CircleBadge';
|
|
22
24
|
export { CounterLabel, type CounterLabelProps } from './components/CounterLabel';
|
|
23
25
|
export { Dialog, type DialogProps } from './components/Dialog';
|
|
24
26
|
export { Flash } from './components/Flash';
|
|
27
|
+
export { FormControl, type FormControlProps } from './components/FormControl';
|
|
25
28
|
export { Header, type HeaderProps } from './components/Header';
|
|
26
29
|
export { Heading } from './components/Heading';
|
|
27
|
-
export { IconButton, type IconButtonProps } from './components/IconButton';
|
|
28
30
|
export { Label, type LabelProps } from './components/Label';
|
|
29
31
|
export { Link, type LinkProps } from './components/Link';
|
|
30
32
|
export { LinkButton, type LinkButtonProps } from './components/LinkButton';
|
|
@@ -39,7 +41,6 @@ export { Spinner, type SpinnerProps } from './components/Spinner';
|
|
|
39
41
|
export { StateLabel, type StateLabelProps } from './components/StateLabel';
|
|
40
42
|
export { SubNav, type SubNavProps, type SubNavLinkProps } from './components/SubNav';
|
|
41
43
|
export { Text, type TextProps } from './components/Text';
|
|
42
|
-
export { TextInput, type TextInputProps, type TextInputActionProps } from './components/TextInput';
|
|
43
44
|
export { Timeline, type TimelineProps, type TimelineItemProps, type TimelineBadgeProps, type TimelineBodyProps, type TimelineBreakProps, } from './components/Timeline';
|
|
44
45
|
export { ToggleSwitch, type ToggleSwitchProps } from './components/ToggleSwitch';
|
|
45
46
|
export { Tooltip, type TooltipProps } from './components/Tooltip';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,KAAK,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ActionList as ActionList$1, sx, ActionMenu as ActionMenu$1, Autocomplete as Autocomplete$1, Box, Avatar as Avatar$1, Breadcrumbs as Breadcrumbs$1,
|
|
2
|
-
export { Box, Details,
|
|
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, FormControl as FormControl$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, Token as Token$1, Truncate as Truncate$1, UnderlineNav as UnderlineNav$1 } from '@primer/react';
|
|
2
|
+
export { Box, Button, Details, IconButton, ProgressBar, Select, TextInput, Textarea, ThemeProvider, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
@@ -169,110 +169,6 @@ const Breadcrumbs = Object.assign(BreadcrumbsImpl, {
|
|
|
169
169
|
*/
|
|
170
170
|
const Breadcrumb = Breadcrumbs;
|
|
171
171
|
|
|
172
|
-
const StyledButtonComponent = styled(Button).withConfig({
|
|
173
|
-
shouldForwardProp: prop => prop !== 'sx'
|
|
174
|
-
}).withConfig({
|
|
175
|
-
displayName: "Button__StyledButtonComponent",
|
|
176
|
-
componentId: "sc-vqy3e4-0"
|
|
177
|
-
})(["", ""], sx);
|
|
178
|
-
const ButtonComponent = /*#__PURE__*/forwardRef(({
|
|
179
|
-
as,
|
|
180
|
-
sx,
|
|
181
|
-
style: propStyle,
|
|
182
|
-
...props
|
|
183
|
-
}, ref) => {
|
|
184
|
-
const {
|
|
185
|
-
block,
|
|
186
|
-
size = 'medium',
|
|
187
|
-
leadingVisual,
|
|
188
|
-
trailingVisual,
|
|
189
|
-
trailingAction
|
|
190
|
-
} = props;
|
|
191
|
-
let sxStyles = {};
|
|
192
|
-
const style = {
|
|
193
|
-
...(propStyle || {})
|
|
194
|
-
};
|
|
195
|
-
if (sx !== null && Object.keys(sx || {}).length > 0) {
|
|
196
|
-
sxStyles = generateCustomSxProp({
|
|
197
|
-
block,
|
|
198
|
-
size,
|
|
199
|
-
leadingVisual,
|
|
200
|
-
trailingVisual,
|
|
201
|
-
trailingAction
|
|
202
|
-
}, sx);
|
|
203
|
-
const {
|
|
204
|
-
color
|
|
205
|
-
} = sx;
|
|
206
|
-
if (color) style['--button-color'] = color;
|
|
207
|
-
}
|
|
208
|
-
return /*#__PURE__*/jsx(StyledButtonComponent, {
|
|
209
|
-
style: style,
|
|
210
|
-
sx: sxStyles,
|
|
211
|
-
ref: ref,
|
|
212
|
-
...props,
|
|
213
|
-
...(as ? {
|
|
214
|
-
forwardedAs: as
|
|
215
|
-
} : {})
|
|
216
|
-
});
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
// This function is used to generate a custom cssSelector for the sxProp
|
|
220
|
-
|
|
221
|
-
// The usual sx prop can like this:
|
|
222
|
-
// sx={{
|
|
223
|
-
// [`@media (max-width: 768px)`]: {
|
|
224
|
-
// '& > ul': {
|
|
225
|
-
// backgroundColor: 'deeppink',
|
|
226
|
-
// },
|
|
227
|
-
// '&:hover': {
|
|
228
|
-
// backgroundColor: 'yellow',
|
|
229
|
-
// },
|
|
230
|
-
// },
|
|
231
|
-
// '&:hover': {
|
|
232
|
-
// backgroundColor: 'yellow',
|
|
233
|
-
// },
|
|
234
|
-
// '&': {
|
|
235
|
-
// width : 320px
|
|
236
|
-
// }
|
|
237
|
-
// }}
|
|
238
|
-
//*
|
|
239
|
-
/* What we want for Button styles is this:
|
|
240
|
-
sx={{
|
|
241
|
-
// [`@media (max-width: 768px)`]: {
|
|
242
|
-
// '&[data-attribute="something"] > ul': {
|
|
243
|
-
// backgroundColor: 'deeppink',
|
|
244
|
-
// },
|
|
245
|
-
// '&[data-attribute="something"]:hover': {
|
|
246
|
-
// backgroundColor: 'yellow',
|
|
247
|
-
// },
|
|
248
|
-
// },
|
|
249
|
-
// '&[data-attribute="something"]:hover': {
|
|
250
|
-
// backgroundColor: 'yellow',
|
|
251
|
-
// },
|
|
252
|
-
// '&[data-attribute="something"]': {
|
|
253
|
-
// width : 320px
|
|
254
|
-
// }
|
|
255
|
-
// }}
|
|
256
|
-
|
|
257
|
-
// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
|
|
258
|
-
*/
|
|
259
|
-
function generateCustomSxProp(props, providedSx) {
|
|
260
|
-
// Possible data attributes: data-size, data-block, data-no-visuals
|
|
261
|
-
const size = `[data-size="${props.size}"]`;
|
|
262
|
-
const block = props.block ? `[data-block="block"]` : '';
|
|
263
|
-
const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]';
|
|
264
|
-
|
|
265
|
-
// this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
|
|
266
|
-
const cssSelector = `&${size}${block}${noVisuals}`; // &[data-size="small"][data-block="block"][data-no-visuals]
|
|
267
|
-
|
|
268
|
-
const customSxProp = {};
|
|
269
|
-
if (!providedSx) return customSxProp;else {
|
|
270
|
-
customSxProp[cssSelector] = providedSx;
|
|
271
|
-
return customSxProp;
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
ButtonComponent.displayName = 'Button';
|
|
275
|
-
|
|
276
172
|
const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
|
|
277
173
|
return /*#__PURE__*/jsx(Box, {
|
|
278
174
|
as: Checkbox$1,
|
|
@@ -336,6 +232,19 @@ const Flash = styled(Flash$1).withConfig({
|
|
|
336
232
|
componentId: "sc-413izo-0"
|
|
337
233
|
})(["", ""], sx);
|
|
338
234
|
|
|
235
|
+
const FormControlImpl = styled(FormControl$1).withConfig({
|
|
236
|
+
shouldForwardProp: prop => prop !== 'sx'
|
|
237
|
+
}).withConfig({
|
|
238
|
+
displayName: "FormControl__FormControlImpl",
|
|
239
|
+
componentId: "sc-1642wfe-0"
|
|
240
|
+
})(["", ""], sx);
|
|
241
|
+
const FormControl = Object.assign(FormControlImpl, {
|
|
242
|
+
Caption: FormControl$1.Caption,
|
|
243
|
+
LeadingVisual: FormControl$1.LeadingVisual,
|
|
244
|
+
Validation: FormControl$1.Validation,
|
|
245
|
+
Label: FormControl$1.Label
|
|
246
|
+
});
|
|
247
|
+
|
|
339
248
|
const StyledHeader = /*#__PURE__*/forwardRef(function Header(props, ref) {
|
|
340
249
|
return /*#__PURE__*/jsx(Box, {
|
|
341
250
|
as: Header$1,
|
|
@@ -389,37 +298,6 @@ const Heading = styled(Heading$1).withConfig({
|
|
|
389
298
|
componentId: "sc-1vc165i-0"
|
|
390
299
|
})(["", ""], sx);
|
|
391
300
|
|
|
392
|
-
const StyledIconButton = styled(IconButton$1).withConfig({
|
|
393
|
-
shouldForwardProp: prop => prop !== 'sx'
|
|
394
|
-
}).withConfig({
|
|
395
|
-
displayName: "IconButton__StyledIconButton",
|
|
396
|
-
componentId: "sc-i53dt6-0"
|
|
397
|
-
})(["", ""], sx);
|
|
398
|
-
const IconButton = /*#__PURE__*/forwardRef(({
|
|
399
|
-
as,
|
|
400
|
-
sx,
|
|
401
|
-
...props
|
|
402
|
-
}, ref) => {
|
|
403
|
-
let sxStyles = sx;
|
|
404
|
-
// grap the button props that have associated data attributes in the styles
|
|
405
|
-
const {
|
|
406
|
-
size = 'medium'
|
|
407
|
-
} = props;
|
|
408
|
-
if (sx !== null && sx !== undefined && Object.keys(sx).length > 0) {
|
|
409
|
-
sxStyles = generateCustomSxProp({
|
|
410
|
-
size
|
|
411
|
-
}, sx);
|
|
412
|
-
}
|
|
413
|
-
return /*#__PURE__*/jsx(StyledIconButton, {
|
|
414
|
-
sx: sxStyles,
|
|
415
|
-
...props,
|
|
416
|
-
...(as ? {
|
|
417
|
-
forwardedAs: as
|
|
418
|
-
} : {}),
|
|
419
|
-
ref: ref
|
|
420
|
-
});
|
|
421
|
-
});
|
|
422
|
-
|
|
423
301
|
const StyledLabel = styled(Label$1).withConfig({
|
|
424
302
|
shouldForwardProp: prop => prop !== 'sx'
|
|
425
303
|
}).withConfig({
|
|
@@ -673,38 +551,6 @@ const Text = /*#__PURE__*/forwardRef(({
|
|
|
673
551
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
674
552
|
});
|
|
675
553
|
|
|
676
|
-
const StyledTextInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
677
|
-
return /*#__PURE__*/jsx(Box, {
|
|
678
|
-
as: TextInput$1,
|
|
679
|
-
ref: ref,
|
|
680
|
-
...props
|
|
681
|
-
});
|
|
682
|
-
});
|
|
683
|
-
const TextInputImpl = /*#__PURE__*/forwardRef(({
|
|
684
|
-
as,
|
|
685
|
-
...props
|
|
686
|
-
}, ref) => {
|
|
687
|
-
return /*#__PURE__*/jsx(StyledTextInput, {
|
|
688
|
-
ref: ref,
|
|
689
|
-
...props,
|
|
690
|
-
...(as ? {
|
|
691
|
-
forwardedAs: as
|
|
692
|
-
} : {})
|
|
693
|
-
});
|
|
694
|
-
});
|
|
695
|
-
const TextInputAction = /*#__PURE__*/forwardRef((props, ref) => {
|
|
696
|
-
return /*#__PURE__*/jsx(Box, {
|
|
697
|
-
as: TextInput$1.Action,
|
|
698
|
-
ref: ref,
|
|
699
|
-
...props
|
|
700
|
-
});
|
|
701
|
-
});
|
|
702
|
-
const TextInput = Object.assign(TextInputImpl, {
|
|
703
|
-
Action: TextInputAction
|
|
704
|
-
});
|
|
705
|
-
TextInputAction.displayName = 'TextInputAction';
|
|
706
|
-
TextInputImpl.displayName = 'TextInput';
|
|
707
|
-
|
|
708
554
|
const TimelineImpl = /*#__PURE__*/forwardRef(function Timeline(props, ref) {
|
|
709
555
|
return /*#__PURE__*/jsx(Box, {
|
|
710
556
|
as: Timeline$1,
|
|
@@ -817,4 +663,4 @@ const UnderlineNav = Object.assign(UnderlineNavImpl, {
|
|
|
817
663
|
Item: UnderlineNavItem
|
|
818
664
|
});
|
|
819
665
|
|
|
820
|
-
export { ActionList, ActionMenu, Autocomplete, Avatar, Breadcrumb, Breadcrumbs,
|
|
666
|
+
export { ActionList, ActionMenu, Autocomplete, Avatar, Breadcrumb, Breadcrumbs, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Flash, FormControl, Header, Heading, Label, Link, LinkButton, NavList, Overlay, PageLayout, RadioGroup, RelativeTime, SegmentedControl, Spinner, StateLabel, SubNav, Text, Timeline, ToggleSwitch, Token, Truncate, UnderlineNav };
|
package/dist/sx.d.ts
CHANGED
package/dist/sx.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sx.d.ts","sourceRoot":"","sources":["../src/sx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAE,KAAK,MAAM,EAAC,MAAM,eAAe,CAAA
|
|
1
|
+
{"version":3,"file":"sx.d.ts","sourceRoot":"","sources":["../src/sx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAE,KAAK,MAAM,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-20251008165550",
|
|
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-20251008165550",
|
|
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-20251008165550",
|
|
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",
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type ButtonProps as PrimerButtonProps } from '@primer/react';
|
|
2
|
-
import type { SxProp } from '../sx';
|
|
3
|
-
import type { BetterSystemStyleObject } from '../styled-props';
|
|
4
|
-
import type { ForwardRefComponent } from '../polymorphic';
|
|
5
|
-
type ButtonComponentProps = PrimerButtonProps & SxProp & {
|
|
6
|
-
as?: React.ElementType;
|
|
7
|
-
};
|
|
8
|
-
declare const ButtonComponent: ForwardRefComponent<"button", ButtonComponentProps>;
|
|
9
|
-
export declare function generateCustomSxProp(props: Partial<Pick<PrimerButtonProps, 'size' | 'block' | 'leadingVisual' | 'trailingVisual' | 'trailingAction'>>, providedSx: BetterSystemStyleObject): {
|
|
10
|
-
[key: string]: BetterSystemStyleObject;
|
|
11
|
-
};
|
|
12
|
-
export { ButtonComponent, type ButtonComponentProps };
|
|
13
|
-
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,WAAW,IAAI,iBAAiB,EAAC,MAAM,eAAe,CAAA;AAC3F,OAAO,KAAK,EAAC,MAAM,EAAsB,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,iBAAiB,CAAA;AAE5D,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAIvD,KAAK,oBAAoB,GAAG,iBAAiB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAQjF,QAAA,MAAM,eAAe,EAgBf,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;AA0CzD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,CAAC,EACjH,UAAU,EAAE,uBAAuB;;EAmBpC;AAID,OAAO,EAAC,eAAe,EAAE,KAAK,oBAAoB,EAAC,CAAA"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { type IconButtonProps as PrimerIconButtonProps, type SxProp } from '@primer/react';
|
|
2
|
-
import { type ForwardRefComponent } from '../polymorphic';
|
|
3
|
-
type IconButtonProps = PrimerIconButtonProps & SxProp & {
|
|
4
|
-
as?: React.ElementType;
|
|
5
|
-
};
|
|
6
|
-
declare const IconButton: ForwardRefComponent<"a" | "button", IconButtonProps>;
|
|
7
|
-
export { IconButton };
|
|
8
|
-
export type { IconButtonProps };
|
|
9
|
-
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,eAAe,IAAI,qBAAqB,EAAE,KAAK,MAAM,EAAC,MAAM,eAAe,CAAA;AACxH,OAAO,EAAC,KAAK,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAMvD,KAAK,eAAe,GAAG,qBAAqB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAQhF,QAAA,MAAM,UAAU,EAUV,mBAAmB,CAAC,GAAG,GAAG,QAAQ,EAAE,eAAe,CAAC,CAAA;AAE1D,OAAO,EAAC,UAAU,EAAC,CAAA;AACnB,YAAY,EAAC,eAAe,EAAC,CAAA"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { type TextInputProps as PrimerTextInputProps, type TextInputActionProps as PrimerTextInputActionProps } from '@primer/react';
|
|
2
|
-
import type { SxProp } from '../sx';
|
|
3
|
-
import type { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
4
|
-
export type TextInputProps = PrimerTextInputProps & SxProp & {
|
|
5
|
-
as?: React.ElementType;
|
|
6
|
-
};
|
|
7
|
-
export type TextInputActionProps = PrimerTextInputActionProps & SxProp;
|
|
8
|
-
declare const TextInputAction: ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "size" | "aria-label" | "tooltipDirection"> & {
|
|
9
|
-
children?: React.ReactNode;
|
|
10
|
-
"aria-label"?: string;
|
|
11
|
-
tooltipDirection?: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
|
|
12
|
-
icon?: React.FunctionComponent<React.PropsWithChildren<import("@primer/octicons-react").IconProps>>;
|
|
13
|
-
variant?: import("@primer/react").ButtonProps["variant"];
|
|
14
|
-
} & SxProp & RefAttributes<HTMLButtonElement>>;
|
|
15
|
-
type TextInputComposite = ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>> & {
|
|
16
|
-
Action: typeof TextInputAction;
|
|
17
|
-
};
|
|
18
|
-
export declare const TextInput: TextInputComposite;
|
|
19
|
-
export {};
|
|
20
|
-
//# sourceMappingURL=TextInput.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/components/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,IAAI,oBAAoB,EAC3C,KAAK,oBAAoB,IAAI,0BAA0B,EACxD,MAAM,eAAe,CAAA;AAGtB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,yBAAyB,EAAE,aAAa,EAAC,MAAM,OAAO,CAAA;AAEnE,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AACrF,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,GAAG,MAAM,CAAA;AAUtE,QAAA,MAAM,eAAe;;;;;;8CAEnB,CAAA;AAEF,KAAK,kBAAkB,GAAG,yBAAyB,CAAC,cAAc,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC,GAAG;IACtG,MAAM,EAAE,OAAO,eAAe,CAAA;CAC/B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,kBAEtB,CAAA"}
|