@primer/styled-react 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/deprecated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deprecated.d.ts","sourceRoot":"","sources":["../src/deprecated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"deprecated.d.ts","sourceRoot":"","sources":["../src/deprecated.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,0BAA0B,CAAA"}

package/dist/experimental.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"experimental.d.ts","sourceRoot":"","sources":["../src/experimental.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAC,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"experimental.d.ts","sourceRoot":"","sources":["../src/experimental.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAC,MAAM,4BAA4B,CAAA"}

package/dist/index.d.ts

@@ -1,5 +1,25 @@
-import { createStyledComponent } from './utils/createStyledComponent';
-declare const ToggleSwitch: ReturnType<typeof createStyledComponent>;
-export { ToggleSwitch };
-export { ActionList, ActionMenu, Autocomplete, Avatar, BranchName, Breadcrumbs, Button, Checkbox, CheckboxGroup, CircleBadge, CircleOcticon, CounterLabel, Details, Dialog, Flash, FormControl, Header, Heading, IconButton, Label, LabelGroup, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, Popover, ProgressBar, RadioGroup, RelativeTime, SegmentedControl, Select, SelectPanel, SideNav, Spinner, Stack, StateLabel, SubNav, Text, Textarea, TextInput, TextInputWithTokens, Timeline, Token, Tooltip, Truncate, UnderlineNav, Box, type BoxProps, sx, type SxProp, type BetterSystemStyleObject, } from '@primer/react';
+import { type BetterSystemStyleObject, type BoxProps, type SxProp, type SubNavProps as PrimerSubNavProps, type SubNavLinkProps as PrimerSubNavLinkProps, type ToggleSwitchProps as PrimerToggleSwitchProps, type SegmentedControlProps as PrimerSegmentedControlProps, type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps, type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps } from '@primer/react';
+import React, { type PropsWithChildren } from 'react';
+import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
+type StyledProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
+type SegmentedControlProps = PropsWithChildren<PrimerSegmentedControlProps> & SxProp;
+type SegmentedControlButtonProps = PropsWithChildren<PrimerSegmentedControlButtonProps> & SxProp;
+type SegmentedControlIconButtonProps = PropsWithChildren<PrimerSegmentedControlIconButtonProps> & SxProp;
+declare const SegmentedControl: ((props: SegmentedControlProps) => React.JSX.Element) & {
+    Button: (props: SegmentedControlButtonProps) => React.JSX.Element;
+    IconButton: (props: SegmentedControlIconButtonProps) => React.JSX.Element;
+};
+declare const StateLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: "small" | "normal";
+    status: "open" | "issueOpened" | "pullOpened" | "issueClosed" | "issueClosedNotPlanned" | "pullClosed" | "pullMerged" | "draft" | "issueDraft" | "pullQueued" | "unavailable" | "closed";
+} & SxProp & React.RefAttributes<HTMLSpanElement>>;
+type SubNavProps = PrimerSubNavProps & SxProp;
+type SubNavLinkProps = PrimerSubNavLinkProps & SxProp;
+declare const SubNav: React.ForwardRefExoticComponent<Omit<SubNavProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Link: React.ForwardRefExoticComponent<Omit<SubNavLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+};
+declare const ToggleSwitch: React.ForwardRefExoticComponent<PrimerToggleSwitchProps & Omit<StyledProps, keyof PrimerToggleSwitchProps> & React.RefAttributes<HTMLButtonElement>>;
+export { SegmentedControl, StateLabel, SubNav, ToggleSwitch };
+export { ActionList, ActionMenu, Autocomplete, Avatar, Breadcrumbs, Button, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Details, Dialog, Flash, FormControl, Header, Heading, IconButton, Label, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, ProgressBar, RadioGroup, RelativeTime, Select, Spinner, Text, Textarea, TextInput, Timeline, Token, Tooltip, Truncate, UnderlineNav, Box, sx, ThemeProvider, merge, theme, themeGet, useColorSchemeVar, useTheme, } from '@primer/react';
+export type { BoxProps, SxProp, BetterSystemStyleObject };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,qBAAqB,EAAC,MAAM,+BAA+B,CAAA;AAEnE,QAAA,MAAM,YAAY,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAA2D,CAAA;AACtH,OAAO,EAAC,YAAY,EAAC,CAAA;AAErB,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,MAAM,EACN,UAAU,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAK,EACL,UAAU,EACV,IAAI,EACJ,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,OAAO,EACP,WAAW,EACX,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAU,EACV,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,YAAY,EAGZ,GAAG,EACH,KAAK,QAAQ,EACb,EAAE,EACF,KAAK,MAAM,EACX,KAAK,uBAAuB,GAC7B,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,uBAAuB,EAE5B,KAAK,QAAQ,EACb,KAAK,MAAM,EAIX,KAAK,WAAW,IAAI,iBAAiB,EACrC,KAAK,eAAe,IAAI,qBAAqB,EAE7C,KAAK,iBAAiB,IAAI,uBAAuB,EACjD,KAAK,qBAAqB,IAAI,2BAA2B,EAEzD,KAAK,2BAA2B,IAAI,iCAAiC,EACrE,KAAK,+BAA+B,IAAI,qCAAqC,EAC9E,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,EAAa,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAC/D,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;AAEtB,KAAK,WAAW,GAAG,MAAM,GACvB,UAAU,GACV,UAAU,GACV,eAAe,GACf,WAAW,GACX,YAAY,GACZ,SAAS,GACT,eAAe,GACf,WAAW,GACX,aAAa,GACb,WAAW,CAAA;AAEb,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,2BAA2B,CAAC,GAAG,MAAM,CAAA;AACpF,KAAK,2BAA2B,GAAG,iBAAiB,CAAC,iCAAiC,CAAC,GAAG,MAAM,CAAA;AAChG,KAAK,+BAA+B,GAAG,iBAAiB,CAAC,qCAAqC,CAAC,GAAG,MAAM,CAAA;AAcxG,QAAA,MAAM,gBAAgB,WAJe,qBAAqB;oBARnB,2BAA2B;wBAIvB,+BAA+B;CAWxE,CAAA;AAIF,QAAA,MAAM,UAAU;;;kDAEd,CAAA;AAEF,KAAK,WAAW,GAAG,iBAAiB,GAAG,MAAM,CAAA;AAM7C,KAAK,eAAe,GAAG,qBAAqB,GAAG,MAAM,CAAA;AAMrD,QAAA,MAAM,MAAM;;CAEV,CAAA;AAIF,QAAA,MAAM,YAAY,sJAEhB,CAAA;AAEF,OAAO,EAAC,gBAAgB,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAC,CAAA;AAE3D,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,MAAM,EACN,WAAW,EACX,MAAM,EACN,QAAQ,EACR,aAAa,EACb,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAK,EACL,IAAI,EACJ,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,YAAY,EAGZ,GAAG,EACH,EAAE,EAGF,aAAa,EACb,KAAK,EACL,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,QAAQ,GACT,MAAM,eAAe,CAAA;AACtB,YAAY,EAAC,QAAQ,EAAE,MAAM,EAAE,uBAAuB,EAAC,CAAA"}

package/dist/index.js

@@ -1,12 +1,62 @@
-import { sx, ToggleSwitch as ToggleSwitch$1 } from '@primer/react';
-export { ActionList, ActionMenu, Autocomplete, Avatar, Box, BranchName, Breadcrumbs, Button, Checkbox, CheckboxGroup, CircleBadge, CircleOcticon, CounterLabel, Details, Dialog, Flash, FormControl, Header, Heading, IconButton, Label, LabelGroup, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, Popover, ProgressBar, RadioGroup, RelativeTime, SegmentedControl, Select, SelectPanel, SideNav, Spinner, Stack, StateLabel, SubNav, Text, TextInput, TextInputWithTokens, Textarea, Timeline, Token, Tooltip, Truncate, UnderlineNav, sx } from '@primer/react';
-import styled from 'styled-components';
-import { space, color, typography, layout, flexbox, grid, background, border, position, shadow } from 'styled-system';
+import { Box, SegmentedControl as SegmentedControl$1, SubNav as SubNav$1, StateLabel as StateLabel$1, ToggleSwitch as ToggleSwitch$1 } from '@primer/react';
+export { ActionList, ActionMenu, Autocomplete, Avatar, Box, Breadcrumbs, Button, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Details, Dialog, Flash, FormControl, Header, Heading, IconButton, Label, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, ProgressBar, RadioGroup, RelativeTime, Select, Spinner, Text, TextInput, Textarea, ThemeProvider, Timeline, Token, Tooltip, Truncate, UnderlineNav, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
+import React, { forwardRef } from 'react';
 
-function createStyledComponent(Component) {
-  return styled(Component)(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
-const ToggleSwitch = /*#__PURE__*/createStyledComponent(ToggleSwitch$1);
+const SegmentedControlButton = props => {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: SegmentedControl$1.Button
+  }, props));
+};
+const SegmentedControlIconButton = props => {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: SegmentedControl$1.IconButton
+  }, props));
+};
+const SegmentedControlImpl = props => {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: SegmentedControl$1
+  }, props));
+};
+const SegmentedControl = Object.assign(SegmentedControlImpl, {
+  Button: SegmentedControlButton,
+  IconButton: SegmentedControlIconButton
+});
+const StateLabel = /*#__PURE__*/forwardRef(function StateLabel(props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: StateLabel$1,
+    ref: ref
+  }, props));
+});
+const SubNavImpl = /*#__PURE__*/forwardRef(function SubNav(props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: SubNav$1,
+    ref: ref
+  }, props));
+});
+const SubNavLink = /*#__PURE__*/forwardRef(function SubNavLink(props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: SubNav$1.Link,
+    ref: ref
+  }, props));
+});
+const SubNav = Object.assign(SubNavImpl, {
+  Link: SubNavLink
+});
+const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: ToggleSwitch$1,
+    ref: ref
+  }, props));
+});
 
-export { ToggleSwitch };
+export { SegmentedControl, StateLabel, SubNav, ToggleSwitch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "type": "module",
   "exports": {
     ".": {
@@ -27,8 +27,9 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@primer/react": "^38.0.0-rc.1",
+    "@primer/react": "^38.0.0-rc.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
@@ -37,13 +38,13 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "4.48.0",
+    "rollup": "4.50.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "styled-components": "5.3.11",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@primer/react": "38.0.0-rc.1",
+    "@primer/react": "38.0.0-rc.3",
     "@types/react": "18.x || 19.x",
     "@types/react-dom": "18.x || 19.x",
     "@types/react-is": "18.x || 19.x",

package/dist/utils/createStyledComponent.d.ts

@@ -1,20 +0,0 @@
-import type { SxProp } from '@primer/react';
-import type React from 'react';
-import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
-type StyledBoxProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
-/**
- * Utility that mirrors the functionality of the `Box` component from
- * `@primer/react`. Used to create a styled component variant of a component
- * from `@primer/react` that no longer supports `sx` or other styled-system
- * props.
- *
- * Note: make sure to include #__PURE__ when using this function to create a
- * component. For example:
- *
- * ```tsx
- * const Link = \/*#__PURE__*\/ createStyledComponent(PrimerLink)
- * ```
- */
-export declare function createStyledComponent<P>(Component: React.ComponentType<P>): import("styled-components").StyledComponent<React.ComponentType<P>, any, StyledBoxProps, never>;
-export {};
-//# sourceMappingURL=createStyledComponent.d.ts.map

package/dist/utils/createStyledComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createStyledComponent.d.ts","sourceRoot":"","sources":["../../src/utils/createStyledComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,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;AAEtB,KAAK,cAAc,GAAG,MAAM,GAC1B,UAAU,GACV,UAAU,GACV,eAAe,GACf,WAAW,GACX,YAAY,GACZ,SAAS,GACT,eAAe,GACf,WAAW,GACX,aAAa,GACb,WAAW,CAAA;AAEb;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,mGAczE"}