@primer/styled-react 0.0.0-20251006184817 → 0.0.0-20251006191316
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/Button.d.ts +13 -0
- package/dist/components/Button.d.ts.map +1 -0
- package/dist/components/IconButton.d.ts +9 -0
- package/dist/components/IconButton.d.ts.map +1 -0
- package/dist/components/PageHeader.d.ts.map +1 -1
- package/dist/components/TextInput.d.ts +15 -0
- package/dist/components/TextInput.d.ts.map +1 -0
- package/dist/components.json +3 -2
- package/dist/index.d.ts +4 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +150 -36
- package/dist/sx.d.ts +3 -0
- package/dist/sx.d.ts.map +1 -1
- package/package.json +3 -3
- package/dist/components/PageLayout.d.ts +0 -18
- package/dist/components/PageLayout.d.ts.map +0 -1
|
@@ -0,0 +1,13 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;AAG5D,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAEvD,KAAK,oBAAoB,GAAG,iBAAiB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAoBjF,QAAA,MAAM,eAAe,EAEf,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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;AAKvD,KAAK,eAAe,GAAG,qBAAqB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAahF,QAAA,MAAM,UAAU,EAEV,mBAAmB,CAAC,GAAG,GAAG,QAAQ,EAAE,eAAe,CAAC,CAAA;AAE1D,OAAO,EAAC,UAAU,EAAC,CAAA;AACnB,YAAY,EAAC,eAAe,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,EAA2B,MAAM,OAAO,CAAA;AAC/D,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;AAwBlF,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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { TextInput as PrimerTextInput, type TextInputActionProps as PrimerTextInputActionProps, type TextInputProps } from '@primer/react';
|
|
2
|
+
import type { SxProp } from '../sx';
|
|
3
|
+
export type TextInputActionProps = PrimerTextInputActionProps & SxProp;
|
|
4
|
+
declare const TextInputAction: import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "size" | "tooltipDirection"> & {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
"aria-label"?: string;
|
|
7
|
+
tooltipDirection?: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
|
|
8
|
+
icon?: React.FunctionComponent<React.PropsWithChildren<import("@primer/octicons-react").IconProps>>;
|
|
9
|
+
variant?: import("@primer/react").ButtonProps["variant"];
|
|
10
|
+
} & SxProp & import("react").RefAttributes<HTMLButtonElement>>;
|
|
11
|
+
declare const TextInput: typeof PrimerTextInput & {
|
|
12
|
+
Action: typeof TextInputAction;
|
|
13
|
+
};
|
|
14
|
+
export { TextInput, type TextInputProps };
|
|
15
|
+
//# sourceMappingURL=TextInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/components/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,eAAe,EAC5B,KAAK,oBAAoB,IAAI,0BAA0B,EACvD,KAAK,cAAc,EACpB,MAAM,eAAe,CAAA;AAGtB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,GAAG,MAAM,CAAA;AAEtE,QAAA,MAAM,eAAe;;;;;;8DAEnB,CAAA;AAEF,QAAA,MAAM,SAAS,EAAE,OAAO,eAAe,GAAG;IAAC,MAAM,EAAE,OAAO,eAAe,CAAA;CAEvE,CAAA;AAIF,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,CAAA"}
|
package/dist/components.json
CHANGED
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
"Details",
|
|
16
16
|
"Dialog",
|
|
17
17
|
"Flash",
|
|
18
|
-
"FormControl",
|
|
19
18
|
"Header",
|
|
20
19
|
"Heading",
|
|
21
20
|
"IconButton",
|
|
@@ -56,6 +55,7 @@
|
|
|
56
55
|
"BoxProps",
|
|
57
56
|
"BreadcrumbsItemProps",
|
|
58
57
|
"BreadcrumbsProps",
|
|
58
|
+
"ButtonProps",
|
|
59
59
|
"CheckboxGroupProps",
|
|
60
60
|
"CheckboxProps",
|
|
61
61
|
"CounterLabelProps",
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
"DialogHeaderProps",
|
|
64
64
|
"DialogProps",
|
|
65
65
|
"HeaderProps",
|
|
66
|
+
"IconButtonProps",
|
|
66
67
|
"LabelProps",
|
|
67
68
|
"LinkButtonProps",
|
|
68
69
|
"LinkProps",
|
|
@@ -70,7 +71,6 @@
|
|
|
70
71
|
"PageHeaderActionsProps",
|
|
71
72
|
"PageHeaderProps",
|
|
72
73
|
"PageHeaderTitleProps",
|
|
73
|
-
"PageLayoutProps",
|
|
74
74
|
"RadioGroupProps",
|
|
75
75
|
"RelativeTimeProps",
|
|
76
76
|
"SegmentedControlButtonProps",
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
"TableTitleProps",
|
|
93
93
|
"TabNavLinkProps",
|
|
94
94
|
"TabNavProps",
|
|
95
|
+
"TextInputActionProps",
|
|
95
96
|
"TextInputProps",
|
|
96
97
|
"TextProps",
|
|
97
98
|
"TimelineBadgeProps",
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
export { ActionList } from '@primer/react';
|
|
2
2
|
export { Box, type BoxProps } from './components/Box';
|
|
3
|
-
export { Button } from '@primer/react';
|
|
4
3
|
export { Details } from '@primer/react';
|
|
5
|
-
export { FormControl } from '@primer/react';
|
|
6
|
-
export { IconButton } from '@primer/react';
|
|
7
4
|
export { ProgressBar } from '@primer/react';
|
|
5
|
+
export { PageLayout } from '@primer/react';
|
|
8
6
|
export { Select } from '@primer/react';
|
|
9
7
|
export { Textarea } from '@primer/react';
|
|
10
|
-
export { TextInput } from '@primer/react';
|
|
11
|
-
export { type TextInputProps } from '@primer/react';
|
|
12
8
|
export { ThemeProvider } from '@primer/react';
|
|
13
9
|
export { merge } from '@primer/react';
|
|
14
10
|
export { theme } from '@primer/react';
|
|
@@ -19,6 +15,7 @@ export { ActionMenu } from './components/ActionMenu';
|
|
|
19
15
|
export { Autocomplete, type AutocompleteOverlayProps } from './components/Autocomplete';
|
|
20
16
|
export { Avatar, type AvatarProps } from './components/Avatar';
|
|
21
17
|
export { Breadcrumbs, Breadcrumb, type BreadcrumbsProps, type BreadcrumbsItemProps } from './components/Breadcrumbs';
|
|
18
|
+
export { ButtonComponent as Button, type ButtonComponentProps as ButtonProps } from './components/Button';
|
|
22
19
|
export { Checkbox, type CheckboxProps } from './components/Checkbox';
|
|
23
20
|
export { CheckboxGroup, type CheckboxGroupProps } from './components/CheckboxGroup';
|
|
24
21
|
export { CircleBadge } from './components/CircleBadge';
|
|
@@ -27,12 +24,12 @@ export { Dialog, type DialogProps } from './components/Dialog';
|
|
|
27
24
|
export { Flash } from './components/Flash';
|
|
28
25
|
export { Header, type HeaderProps } from './components/Header';
|
|
29
26
|
export { Heading } from './components/Heading';
|
|
27
|
+
export { IconButton, type IconButtonProps } from './components/IconButton';
|
|
30
28
|
export { Label, type LabelProps } from './components/Label';
|
|
31
29
|
export { Link, type LinkProps } from './components/Link';
|
|
32
30
|
export { LinkButton, type LinkButtonProps } from './components/LinkButton';
|
|
33
31
|
export { NavList, type NavListProps } from './components/NavList';
|
|
34
32
|
export { Overlay } from './components/Overlay';
|
|
35
|
-
export { PageLayout, type PageLayoutProps } from './components/PageLayout';
|
|
36
33
|
export { PageHeader, type PageHeaderProps, type PageHeaderActionsProps, type PageHeaderTitleProps, } from './components/PageHeader';
|
|
37
34
|
export { RadioGroup, type RadioGroupProps } from './components/RadioGroup';
|
|
38
35
|
export { RelativeTime, type RelativeTimeProps } from './components/RelativeTime';
|
|
@@ -41,6 +38,7 @@ export { Spinner, type SpinnerProps } from './components/Spinner';
|
|
|
41
38
|
export { StateLabel, type StateLabelProps } from './components/StateLabel';
|
|
42
39
|
export { SubNav, type SubNavProps, type SubNavLinkProps } from './components/SubNav';
|
|
43
40
|
export { Text, type TextProps } from './components/Text';
|
|
41
|
+
export { TextInput, type TextInputProps, type TextInputActionProps } from './components/TextInput';
|
|
44
42
|
export { Timeline, type TimelineProps, type TimelineItemProps, type TimelineBadgeProps, type TimelineBodyProps, type TimelineBreakProps, } from './components/Timeline';
|
|
45
43
|
export { ToggleSwitch, type ToggleSwitchProps } from './components/ToggleSwitch';
|
|
46
44
|
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,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,OAAO,EAAC,GAAG,EAAE,KAAK,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AACnD,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 { ActionMenu as ActionMenu$1, sx, 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,
|
|
2
|
-
export { ActionList, Box,
|
|
1
|
+
import { ActionMenu as ActionMenu$1, sx, Autocomplete as Autocomplete$1, Box, Avatar as Avatar$1, Breadcrumbs as Breadcrumbs$1, Button, 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, IconButton as IconButton$1, Label as Label$1, Link as Link$1, LinkButton as LinkButton$1, NavList as NavList$1, Overlay as Overlay$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, TextInput as TextInput$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 { ActionList, Box, Details, PageLayout, ProgressBar, Select, Textarea, ThemeProvider, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import React, { forwardRef } from 'react';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
@@ -74,6 +74,108 @@ const Breadcrumbs = Object.assign(BreadcrumbsImpl, {
|
|
|
74
74
|
*/
|
|
75
75
|
const Breadcrumb = Breadcrumbs;
|
|
76
76
|
|
|
77
|
+
const StyledButtonComponent = /*#__PURE__*/forwardRef(({
|
|
78
|
+
sx,
|
|
79
|
+
...rest
|
|
80
|
+
}, ref) => {
|
|
81
|
+
const {
|
|
82
|
+
block,
|
|
83
|
+
size = 'medium',
|
|
84
|
+
leadingVisual,
|
|
85
|
+
trailingVisual,
|
|
86
|
+
trailingAction
|
|
87
|
+
} = rest;
|
|
88
|
+
let sxStyles = {};
|
|
89
|
+
const style = {};
|
|
90
|
+
if (sx !== null && Object.keys(sx || {}).length > 0) {
|
|
91
|
+
sxStyles = generateCustomSxProp({
|
|
92
|
+
block,
|
|
93
|
+
size,
|
|
94
|
+
leadingVisual,
|
|
95
|
+
trailingVisual,
|
|
96
|
+
trailingAction
|
|
97
|
+
}, sx);
|
|
98
|
+
const {
|
|
99
|
+
color
|
|
100
|
+
} = sx;
|
|
101
|
+
if (color) style['--button-color'] = color;
|
|
102
|
+
}
|
|
103
|
+
return /*#__PURE__*/jsx(Box, {
|
|
104
|
+
as: Button,
|
|
105
|
+
style: style,
|
|
106
|
+
sx: sxStyles,
|
|
107
|
+
ref: ref,
|
|
108
|
+
...rest
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
const ButtonComponent = /*#__PURE__*/forwardRef(({
|
|
112
|
+
as,
|
|
113
|
+
...props
|
|
114
|
+
}, ref) => /*#__PURE__*/jsx(StyledButtonComponent, {
|
|
115
|
+
ref: ref,
|
|
116
|
+
...props,
|
|
117
|
+
...(as ? {
|
|
118
|
+
forwardedAs: as
|
|
119
|
+
} : {})
|
|
120
|
+
}));
|
|
121
|
+
|
|
122
|
+
// This function is used to generate a custom cssSelector for the sxProp
|
|
123
|
+
|
|
124
|
+
// The usual sx prop can like this:
|
|
125
|
+
// sx={{
|
|
126
|
+
// [`@media (max-width: 768px)`]: {
|
|
127
|
+
// '& > ul': {
|
|
128
|
+
// backgroundColor: 'deeppink',
|
|
129
|
+
// },
|
|
130
|
+
// '&:hover': {
|
|
131
|
+
// backgroundColor: 'yellow',
|
|
132
|
+
// },
|
|
133
|
+
// },
|
|
134
|
+
// '&:hover': {
|
|
135
|
+
// backgroundColor: 'yellow',
|
|
136
|
+
// },
|
|
137
|
+
// '&': {
|
|
138
|
+
// width : 320px
|
|
139
|
+
// }
|
|
140
|
+
// }}
|
|
141
|
+
//*
|
|
142
|
+
/* What we want for Button styles is this:
|
|
143
|
+
sx={{
|
|
144
|
+
// [`@media (max-width: 768px)`]: {
|
|
145
|
+
// '&[data-attribute="something"] > ul': {
|
|
146
|
+
// backgroundColor: 'deeppink',
|
|
147
|
+
// },
|
|
148
|
+
// '&[data-attribute="something"]:hover': {
|
|
149
|
+
// backgroundColor: 'yellow',
|
|
150
|
+
// },
|
|
151
|
+
// },
|
|
152
|
+
// '&[data-attribute="something"]:hover': {
|
|
153
|
+
// backgroundColor: 'yellow',
|
|
154
|
+
// },
|
|
155
|
+
// '&[data-attribute="something"]': {
|
|
156
|
+
// width : 320px
|
|
157
|
+
// }
|
|
158
|
+
// }}
|
|
159
|
+
|
|
160
|
+
// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
|
|
161
|
+
*/
|
|
162
|
+
function generateCustomSxProp(props, providedSx) {
|
|
163
|
+
// Possible data attributes: data-size, data-block, data-no-visuals
|
|
164
|
+
const size = `[data-size="${props.size}"]`;
|
|
165
|
+
const block = props.block ? `[data-block="block"]` : '';
|
|
166
|
+
const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]';
|
|
167
|
+
|
|
168
|
+
// this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
|
|
169
|
+
const cssSelector = `&${size}${block}${noVisuals}`; // &[data-size="small"][data-block="block"][data-no-visuals]
|
|
170
|
+
|
|
171
|
+
const customSxProp = {};
|
|
172
|
+
if (!providedSx) return customSxProp;else {
|
|
173
|
+
customSxProp[cssSelector] = providedSx;
|
|
174
|
+
return customSxProp;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
ButtonComponent.displayName = 'Button';
|
|
178
|
+
|
|
77
179
|
const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
|
|
78
180
|
return /*#__PURE__*/jsx(Box, {
|
|
79
181
|
as: Checkbox$1,
|
|
@@ -190,6 +292,38 @@ const Heading = styled(Heading$1).withConfig({
|
|
|
190
292
|
componentId: "sc-1vc165i-0"
|
|
191
293
|
})(["", ""], sx);
|
|
192
294
|
|
|
295
|
+
const StyledIconButton = /*#__PURE__*/forwardRef(({
|
|
296
|
+
sx,
|
|
297
|
+
...rest
|
|
298
|
+
}, ref) => {
|
|
299
|
+
let sxStyles = sx;
|
|
300
|
+
// grap the button props that have associated data attributes in the styles
|
|
301
|
+
const {
|
|
302
|
+
size = 'medium'
|
|
303
|
+
} = rest;
|
|
304
|
+
if (sx !== null && sx !== undefined && Object.keys(sx).length > 0) {
|
|
305
|
+
sxStyles = generateCustomSxProp({
|
|
306
|
+
size
|
|
307
|
+
}, sx);
|
|
308
|
+
}
|
|
309
|
+
return /*#__PURE__*/jsx(Box, {
|
|
310
|
+
sx: sxStyles,
|
|
311
|
+
as: IconButton$1,
|
|
312
|
+
ref: ref,
|
|
313
|
+
...rest
|
|
314
|
+
});
|
|
315
|
+
});
|
|
316
|
+
const IconButton = /*#__PURE__*/forwardRef(({
|
|
317
|
+
as,
|
|
318
|
+
...props
|
|
319
|
+
}, ref) => /*#__PURE__*/jsx(StyledIconButton, {
|
|
320
|
+
...props,
|
|
321
|
+
...(as ? {
|
|
322
|
+
forwardedAs: as
|
|
323
|
+
} : {}),
|
|
324
|
+
ref: ref
|
|
325
|
+
}));
|
|
326
|
+
|
|
193
327
|
const StyledLabel = /*#__PURE__*/forwardRef(function Label(props, ref) {
|
|
194
328
|
return /*#__PURE__*/jsx(Box, {
|
|
195
329
|
as: Label$1,
|
|
@@ -281,39 +415,6 @@ const Overlay = styled(Overlay$1).withConfig({
|
|
|
281
415
|
componentId: "sc-tjbd74-0"
|
|
282
416
|
})(["", ""], sx);
|
|
283
417
|
|
|
284
|
-
const Wrapper = styled.div.withConfig({
|
|
285
|
-
displayName: "PageLayout__Wrapper",
|
|
286
|
-
componentId: "sc-pjybtc-0"
|
|
287
|
-
})(["", ""], sx);
|
|
288
|
-
const PageLayoutImpl = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
289
|
-
// @ts-expect-error - PrimerPageLayout is not recognized as a valid component type
|
|
290
|
-
return /*#__PURE__*/jsx(Wrapper, {
|
|
291
|
-
as: PageLayout$1,
|
|
292
|
-
ref: ref,
|
|
293
|
-
...props
|
|
294
|
-
});
|
|
295
|
-
});
|
|
296
|
-
const PageLayoutContent = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
297
|
-
return /*#__PURE__*/jsx(Wrapper, {
|
|
298
|
-
as: PageLayout$1.Content,
|
|
299
|
-
ref: ref,
|
|
300
|
-
...props
|
|
301
|
-
});
|
|
302
|
-
});
|
|
303
|
-
const PageLayoutPane = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
304
|
-
return /*#__PURE__*/jsx(Wrapper, {
|
|
305
|
-
as: PageLayout$1.Pane,
|
|
306
|
-
ref: ref,
|
|
307
|
-
...props
|
|
308
|
-
});
|
|
309
|
-
});
|
|
310
|
-
const PageLayout = Object.assign(PageLayoutImpl, {
|
|
311
|
-
Content: PageLayoutContent,
|
|
312
|
-
Header: PageLayout$1.Header,
|
|
313
|
-
Pane: PageLayoutPane,
|
|
314
|
-
Footer: PageLayout$1.Footer
|
|
315
|
-
});
|
|
316
|
-
|
|
317
418
|
const RadioGroupImpl = props => {
|
|
318
419
|
return /*#__PURE__*/jsx(Box, {
|
|
319
420
|
as: RadioGroup$1,
|
|
@@ -431,6 +532,19 @@ const Text = /*#__PURE__*/forwardRef(({
|
|
|
431
532
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
432
533
|
});
|
|
433
534
|
|
|
535
|
+
const TextInputAction = /*#__PURE__*/forwardRef((props, ref) => {
|
|
536
|
+
return /*#__PURE__*/jsx(Box, {
|
|
537
|
+
as: TextInput$1.Action,
|
|
538
|
+
ref: ref,
|
|
539
|
+
...props
|
|
540
|
+
});
|
|
541
|
+
});
|
|
542
|
+
const TextInput = Object.assign(TextInput$1, {
|
|
543
|
+
Action: TextInputAction
|
|
544
|
+
});
|
|
545
|
+
TextInput.displayName = 'TextInput';
|
|
546
|
+
TextInputAction.displayName = 'TextInput.Action';
|
|
547
|
+
|
|
434
548
|
const TimelineImpl = /*#__PURE__*/forwardRef(function Timeline(props, ref) {
|
|
435
549
|
return /*#__PURE__*/jsx(Box, {
|
|
436
550
|
as: Timeline$1,
|
|
@@ -554,4 +668,4 @@ const UnderlineNav = Object.assign(UnderlineNavImpl, {
|
|
|
554
668
|
Item: UnderlineNavItem
|
|
555
669
|
});
|
|
556
670
|
|
|
557
|
-
export { ActionMenu, Autocomplete, Avatar, Breadcrumb, Breadcrumbs, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Flash, Header, Heading, Label, Link, LinkButton, NavList, Overlay,
|
|
671
|
+
export { ActionMenu, Autocomplete, Avatar, Breadcrumb, Breadcrumbs, ButtonComponent as Button, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Flash, Header, Heading, IconButton, Label, Link, LinkButton, NavList, Overlay, RadioGroup, RelativeTime, SegmentedControl, Spinner, StateLabel, SubNav, Text, TextInput, 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;AAC7C,MAAM,MAAM,mBAAmB,GAAG;IAChC,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;CACtC,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-20251006191316",
|
|
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-20251006191316",
|
|
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-20251006191316",
|
|
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,18 +0,0 @@
|
|
|
1
|
-
import React, { type PropsWithChildren } from 'react';
|
|
2
|
-
import type { PageLayoutProps as PrimerPageLayoutProps, PageLayoutContentProps as PrimerPageLayoutContentProps, PageLayoutPaneProps as PrimerPageLayoutPaneProps } from '@primer/react';
|
|
3
|
-
import { type SxProp } from '../sx';
|
|
4
|
-
type PageLayoutProps = PropsWithChildren<PrimerPageLayoutProps> & SxProp;
|
|
5
|
-
declare const PageLayout: React.ForwardRefExoticComponent<PrimerPageLayoutProps & {
|
|
6
|
-
children?: React.ReactNode | undefined;
|
|
7
|
-
} & SxProp & React.RefAttributes<HTMLDivElement>> & {
|
|
8
|
-
Content: React.ForwardRefExoticComponent<PrimerPageLayoutContentProps & {
|
|
9
|
-
children?: React.ReactNode | undefined;
|
|
10
|
-
} & SxProp & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
-
Header: React.FC<React.PropsWithChildren<import("@primer/react").PageLayoutHeaderProps>>;
|
|
12
|
-
Pane: React.ForwardRefExoticComponent<PrimerPageLayoutPaneProps & {
|
|
13
|
-
children?: React.ReactNode | undefined;
|
|
14
|
-
} & SxProp & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
-
Footer: React.FC<React.PropsWithChildren<import("@primer/react").PageLayoutFooterProps>>;
|
|
16
|
-
};
|
|
17
|
-
export { PageLayout, type PageLayoutProps };
|
|
18
|
-
//# sourceMappingURL=PageLayout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../src/components/PageLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EACV,eAAe,IAAI,qBAAqB,EACxC,sBAAsB,IAAI,4BAA4B,EACtD,mBAAmB,IAAI,yBAAyB,EACjD,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAMrC,KAAK,eAAe,GAAG,iBAAiB,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAA;AAmBxE,QAAA,MAAM,UAAU;;;;;;;;;;;CAKd,CAAA;AAEF,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,CAAA"}
|