@primer/styled-react 1.0.0-rc.7 → 1.0.0-rc.9

package/dist/index.js

@@ -1,511 +1,43 @@
-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, 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';
-export { ActionList, Box, Button, Details, FormControl, IconButton, PageLayout, ProgressBar, Select, TextInput, Textarea, ThemeProvider, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
-import styled from 'styled-components';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-export { D as Dialog, P as PageHeader } from './PageHeader-DCDIR2C1.js';
-export { T as Tooltip } from './Tooltip-YuSlJ5b_.js';
-import '@primer/react/deprecated';
-
-const ActionMenuOverlay = styled(ActionMenu$1.Overlay).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionMenu__ActionMenuOverlay",
-  componentId: "sc-w5s60e-0"
-})(["", ""], sx);
-const ActionMenu = Object.assign(ActionMenu$1, {
-  Button: ActionMenu$1.Button,
-  Anchor: ActionMenu$1.Anchor,
-  Overlay: ActionMenuOverlay,
-  Divider: ActionMenu$1.Divider
-});
-
-const AutocompleteOverlay = styled(Autocomplete$1.Overlay).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Autocomplete__AutocompleteOverlay",
-  componentId: "sc-j8ax2e-0"
-})(["", ""], sx);
-const Autocomplete = Object.assign(Autocomplete$1, {
-  Context: Autocomplete$1.Context,
-  Input: Autocomplete$1.Input,
-  Menu: Autocomplete$1.Menu,
-  Overlay: AutocompleteOverlay
-});
-
-const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Avatar$1,
-    ref: ref,
-    ...props
-  });
-});
-
-const BreadcrumbsImpl = styled(Breadcrumbs$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Breadcrumbs__BreadcrumbsImpl",
-  componentId: "sc-1qj8pw-0"
-})(["", ""], sx);
-const StyledBreadcrumbsItem = styled(Breadcrumbs$1.Item).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Breadcrumbs__StyledBreadcrumbsItem",
-  componentId: "sc-1qj8pw-1"
-})(["", ""], sx);
-function BreadcrumbsItem({
-  as,
-  ...props
-}) {
-  return /*#__PURE__*/jsx(StyledBreadcrumbsItem, {
-    ...props,
-    ...(as ? {
-      forwardedAs: as
-    } : {})
-  });
-}
-const Breadcrumbs = Object.assign(BreadcrumbsImpl, {
-  Item: BreadcrumbsItem
-});
-
-/**
- * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
- */
-const Breadcrumb = Breadcrumbs;
-
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Checkbox$1,
-    ref: ref,
-    ...props
-  });
-});
-
-const CheckboxGroupImpl = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1,
-    ...props
-  });
-};
-
-// Define local types based on the internal component props
-
-const CheckboxOrRadioGroupLabel$1 = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Label,
-    ...props
-  });
-};
-const CheckboxOrRadioGroupCaption$1 = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Caption,
-    ...props
-  });
-};
-const CheckboxOrRadioGroupValidation$1 = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Validation,
-    ...props
-  });
-};
-const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
-  Label: CheckboxOrRadioGroupLabel$1,
-  Caption: CheckboxOrRadioGroupCaption$1,
-  Validation: CheckboxOrRadioGroupValidation$1
-});
-
-const CircleBadge = styled(CircleBadge$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "CircleBadge",
-  componentId: "sc-1u7lp3v-0"
-})(["", ""], sx);
-
-const CounterLabel = /*#__PURE__*/forwardRef(function CounterLabel(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: CounterLabel$1,
-    ref: ref,
-    ...props
-  });
-});
-
-const Flash = styled(Flash$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Flash",
-  componentId: "sc-413izo-0"
-})(["", ""], sx);
-
-const StyledHeader = /*#__PURE__*/forwardRef(function Header(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Header$1,
-    ref: ref,
-    ...props
-  });
-});
-const HeaderImpl = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => /*#__PURE__*/jsx(StyledHeader, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  ref: ref
-}));
-const HeaderItem = /*#__PURE__*/forwardRef(function HeaderItem(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Header$1.Item,
-    ref: ref,
-    ...props
-  });
-});
-const StyledHeaderLink = /*#__PURE__*/forwardRef(function HeaderLink(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Header$1.Link,
-    ref: ref,
-    ...props
-  });
-});
-const HeaderLink = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => /*#__PURE__*/jsx(StyledHeaderLink, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  ref: ref
-}));
-const Header = Object.assign(HeaderImpl, {
-  Item: HeaderItem,
-  Link: HeaderLink
-});
-
-const Heading = styled(Heading$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Heading",
-  componentId: "sc-1vc165i-0"
-})(["", ""], sx);
-
-const StyledLabel = styled(Label$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Label__StyledLabel",
-  componentId: "sc-1cpass9-0"
-})(["", ""], sx);
-const Label = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/jsx(StyledLabel, {
-    ...props,
-    ...(as ? {
-      forwardedAs: as
-    } : {}),
-    ref: ref
-  });
-});
-
-const StyledLink = styled(Link$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Link__StyledLink",
-  componentId: "sc-1syctfj-0"
-})(["", ""], sx);
-const Link = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/jsx(StyledLink, {
-    ...props,
-    ...(as ? {
-      forwardedAs: as
-    } : {}),
-    ref: ref
-  });
-});
-
-const LinkButton = styled(LinkButton$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "LinkButton",
-  componentId: "sc-1v6zkmg-0"
-})(["", ""], sx);
-
-const NavListImpl = /*#__PURE__*/forwardRef(function NavList(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: NavList$1,
-    ref: ref,
-    ...props
-  });
-});
-const NavListItem = /*#__PURE__*/forwardRef(function NavListItem(props, ref) {
-  // @ts-expect-error - PrimerNavList.Item is not recognized as a valid component type
-  return /*#__PURE__*/jsx(Box, {
-    as: NavList$1.Item,
-    ref: ref,
-    ...props
-  });
-});
-const NavListGroup = /*#__PURE__*/forwardRef(function NavListGroup(props, ref) {
-  // @ts-expect-error - PrimerNavList.Group is not recognized as a valid component type
-  return /*#__PURE__*/jsx(Box, {
-    as: NavList$1.Group,
-    ref: ref,
-    ...props
-  });
-});
-const NavList = Object.assign(NavListImpl, {
-  // Wrapped components that need sx support added back in
-  Item: NavListItem,
-  Group: NavListGroup,
-  // Re-exporting others directly
-  // TODO: try to remove typecasts to work around "non-portable types" TS error
-  SubNav: NavList$1.SubNav,
-  Divider: NavList$1.Divider,
-  LeadingVisual: NavList$1.LeadingVisual,
-  TrailingVisual: NavList$1.TrailingVisual,
-  TrailingAction: NavList$1.TrailingAction,
-  GroupHeading: NavList$1.GroupHeading,
-  GroupExpand: NavList$1.GroupExpand
-});
-
-const Overlay = styled(Overlay$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Overlay",
-  componentId: "sc-tjbd74-0"
-})(["", ""], sx);
-
-const RadioGroupImpl = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: RadioGroup$1,
-    ...props
-  });
-};
-
-// Define local types based on the internal component props
-
-const CheckboxOrRadioGroupLabel = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: RadioGroup$1.Label,
-    ...props
-  });
-};
-const CheckboxOrRadioGroupCaption = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: RadioGroup$1.Caption,
-    ...props
-  });
-};
-const CheckboxOrRadioGroupValidation = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: RadioGroup$1.Validation,
-    ...props
-  });
-};
-const RadioGroup = Object.assign(RadioGroupImpl, {
-  Label: CheckboxOrRadioGroupLabel,
-  Caption: CheckboxOrRadioGroupCaption,
-  Validation: CheckboxOrRadioGroupValidation
-});
-
-function RelativeTime(props) {
-  // @ts-expect-error the types for Box are not correctly inferred here
-  return /*#__PURE__*/jsx(Box, {
-    as: RelativeTime$1,
-    ...props
-  });
-}
-
-const SegmentedControlButton = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: SegmentedControl$1.Button,
-    ...props
-  });
-};
-const SegmentedControlIconButton = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: SegmentedControl$1.IconButton,
-    ...props
-  });
-};
-const SegmentedControlImpl = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: SegmentedControl$1,
-    ...props
-  });
-};
-const SegmentedControl = Object.assign(SegmentedControlImpl, {
-  Button: SegmentedControlButton,
-  IconButton: SegmentedControlIconButton
-});
-
-const Spinner = styled(Spinner$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Spinner",
-  componentId: "sc-jbw2a0-0"
-})(["", ""], sx);
-
-const StateLabel = /*#__PURE__*/forwardRef(function StateLabel(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: StateLabel$1,
-    ref: ref,
-    ...props
-  });
-});
-
-const SubNavImpl = /*#__PURE__*/forwardRef(function SubNav(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: SubNav$1,
-    ref: ref,
-    ...props
-  });
-});
-const SubNavLink = /*#__PURE__*/forwardRef(function SubNavLink(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: SubNav$1.Link,
-    ref: ref,
-    ...props
-  });
-});
-const SubNav = Object.assign(SubNavImpl, {
-  Link: SubNavLink
-});
-
-const StyledText = styled(Text$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Text__StyledText",
-  componentId: "sc-1klmep6-0"
-})(["", ""], sx);
-const Text = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/jsx(StyledText, {
-    ...props,
-    ...(as ? {
-      forwardedAs: as
-    } : {}),
-    ref: ref
-  });
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-});
-
-const TimelineImpl = /*#__PURE__*/forwardRef(function Timeline(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1,
-    ref: ref,
-    ...props
-  });
-});
-const TimelineItem = /*#__PURE__*/forwardRef(function TimelineItem(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1.Item,
-    ref: ref,
-    ...props
-  });
-});
-function TimelineBadge(props) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1.Badge,
-    ...props
-  });
-}
-const TimelineBody = /*#__PURE__*/forwardRef(function TimelineBody(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1.Body,
-    ref: ref,
-    ...props
-  });
-});
-const TimelineBreak = /*#__PURE__*/forwardRef(function TimelineBreak(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1.Break,
-    ref: ref,
-    ...props
-  });
-});
-const Timeline = Object.assign(TimelineImpl, {
-  Item: TimelineItem,
-  Badge: TimelineBadge,
-  Body: TimelineBody,
-  Break: TimelineBreak
-});
-
-const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: ToggleSwitch$1,
-    ref: ref,
-    ...props
-  });
-});
-
-const StyledToken = styled(Token$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Token__StyledToken",
-  componentId: "sc-ldn0r8-0"
-})(["", ""], sx);
-const Token = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/jsx(StyledToken, {
-    ...props,
-    ...(as ? {
-      forwardedAs: as
-    } : {}),
-    ref: ref
-  });
-});
-
-const Truncate = styled(Truncate$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Truncate",
-  componentId: "sc-x3i4it-0"
-})(["", ""], sx);
-
-const StyledUnderlineNav = /*#__PURE__*/forwardRef(function UnderlineNav(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: UnderlineNav$1,
-    ref: ref,
-    ...props
-  });
-});
-const UnderlineNavImpl = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => /*#__PURE__*/jsx(StyledUnderlineNav, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  ref: ref
-}));
-const StyledUnderlineNavItem = styled(UnderlineNav$1.Item).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "UnderlineNav__StyledUnderlineNavItem",
-  componentId: "sc-dx6br2-0"
-})(["", ""], sx);
-const UnderlineNavItem = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => /*#__PURE__*/jsx(StyledUnderlineNavItem, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  ref: ref
-}));
-const UnderlineNav = Object.assign(UnderlineNavImpl, {
-  Item: UnderlineNavItem
-});
-
-export { ActionMenu, Autocomplete, Avatar, Breadcrumb, Breadcrumbs, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Flash, Header, Heading, Label, Link, LinkButton, NavList, Overlay, RadioGroup, RelativeTime, SegmentedControl, Spinner, StateLabel, SubNav, Text, Timeline, ToggleSwitch, Token, Truncate, UnderlineNav };
+"use client";
+export { default as Box } from './components/Box.js';
+export { Details, ProgressBar, merge, sx, theme, themeGet } from '@primer/react';
+export { BaseStyles, ThemeProvider, useColorSchemeVar, useTheme } from './components/FeatureFlaggedTheming.js';
+export { ActionList } from './components/ActionList.js';
+export { ActionMenu } from './components/ActionMenu.js';
+export { Autocomplete } from './components/Autocomplete.js';
+export { Avatar } from './components/Avatar.js';
+export { Breadcrumb, Breadcrumbs } from './components/Breadcrumbs.js';
+export { ButtonComponent as Button } from './components/Button.js';
+export { Checkbox } from './components/Checkbox.js';
+export { CheckboxGroup } from './components/CheckboxGroup.js';
+export { CircleBadge } from './components/CircleBadge.js';
+export { CounterLabel } from './components/CounterLabel.js';
+export { Dialog } from './components/Dialog.js';
+export { Flash } from './components/Flash.js';
+export { FormControl } from './components/FormControl.js';
+export { Header } from './components/Header.js';
+export { Heading } from './components/Heading.js';
+export { IconButton } from './components/IconButton.js';
+export { Label } from './components/Label.js';
+export { Link } from './components/Link.js';
+export { LinkButton } from './components/LinkButton.js';
+export { NavList } from './components/NavList.js';
+export { Overlay } from './components/Overlay.js';
+export { PageLayout } from './components/PageLayout.js';
+export { PageHeader } from './components/PageHeader.js';
+export { RadioGroup } from './components/RadioGroup.js';
+export { RelativeTime } from './components/RelativeTime.js';
+export { SegmentedControl } from './components/SegmentedControl.js';
+export { Select } from './components/Select.js';
+export { Spinner } from './components/Spinner.js';
+export { StateLabel } from './components/StateLabel.js';
+export { SubNav } from './components/SubNav.js';
+export { Text } from './components/Text.js';
+export { Textarea } from './components/Textarea.js';
+export { TextInput } from './components/TextInput.js';
+export { Timeline } from './components/Timeline.js';
+export { ToggleSwitch } from './components/ToggleSwitch.js';
+export { Tooltip } from './components/Tooltip.js';
+export { Token } from './components/Token.js';
+export { Truncate } from './components/Truncate.js';
+export { UnderlineNav } from './components/UnderlineNav.js';

package/dist/sx.d.ts

@@ -1,2 +1,5 @@
 export { sx, type SxProp } from '@primer/react';
+export type CSSCustomProperties = {
+    [key: `--${string}`]: string | number;
+};
 //# sourceMappingURL=sx.d.ts.map

package/dist/sx.d.ts.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0-rc.9",
   "type": "module",
   "exports": {
     ".": {
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@primer/react": "^38.0.0-rc.6",
+    "@primer/react": "^38.0.0-rc.8",
     "@rollup/plugin-babel": "^6.0.4",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
@@ -46,7 +46,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@primer/react": "38.0.0-rc.6",
+    "@primer/react": "38.0.0-rc.8",
     "@types/react": "18.x || 19.x",
     "@types/react-dom": "18.x || 19.x",
     "@types/react-is": "18.x || 19.x",