@primer/styled-react 0.0.0-20251202212638 → 0.0.0-20251202220556

package/dist/packages/styled-react/src/index.js

@@ -0,0 +1,50 @@
+"use client";
+'use client';
+
+import { import_cjs, sx } from "./sx.js";
+import { Box } from "./components/Box.js";
+import { ThemeProvider, useColorSchemeVar, useTheme } from "./components/ThemeProvider.js";
+import { BaseStyles } from "./components/BaseStyles.js";
+import { get } from "./theme-get.js";
+import { ActionList } from "./components/ActionList.js";
+import { ActionMenu } from "./components/ActionMenu.js";
+import { Autocomplete } from "./components/Autocomplete.js";
+import { Avatar } from "./components/Avatar.js";
+import { Breadcrumb, Breadcrumbs } from "./components/Breadcrumbs.js";
+import { ButtonComponent } from "./components/Button.js";
+import { Checkbox } from "./components/Checkbox.js";
+import { CheckboxGroup } from "./components/CheckboxGroup.js";
+import { CircleBadge } from "./components/CircleBadge.js";
+import { CounterLabel } from "./components/CounterLabel.js";
+import { Dialog } from "./components/Dialog.js";
+import { Flash } from "./components/Flash.js";
+import { FormControl } from "./components/FormControl.js";
+import { Header } from "./components/Header.js";
+import { Heading } from "./components/Heading.js";
+import { IconButton } from "./components/IconButton.js";
+import { Label } from "./components/Label.js";
+import { Link } from "./components/Link.js";
+import { LinkButton } from "./components/LinkButton.js";
+import { NavList } from "./components/NavList.js";
+import { Overlay } from "./components/Overlay.js";
+import { PageHeader } from "./components/PageHeader.js";
+import { RadioGroup } from "./components/RadioGroup.js";
+import { RelativeTime } from "./components/RelativeTime.js";
+import { SegmentedControl } from "./components/SegmentedControl.js";
+import { Select } from "./components/Select.js";
+import { Spinner } from "./components/Spinner.js";
+import { StateLabel } from "./components/StateLabel.js";
+import { SubNav } from "./components/SubNav.js";
+import { Text } from "./components/Text.js";
+import { Textarea } from "./components/Textarea.js";
+import { TextInput } from "./components/TextInput.js";
+import { Timeline } from "./components/Timeline.js";
+import { ToggleSwitch } from "./components/ToggleSwitch.js";
+import { Tooltip } from "./components/Tooltip.js";
+import { Token } from "./components/Token.js";
+import { Truncate } from "./components/Truncate.js";
+import { UnderlineNav } from "./components/UnderlineNav.js";
+import { Details, ProgressBar, theme } from "@primer/react";
+
+var merge = import_cjs.default;
+export { ActionList, ActionMenu, Autocomplete, Avatar, BaseStyles, Box, Breadcrumb, Breadcrumbs, ButtonComponent as Button, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Details, Dialog, Flash, FormControl, Header, Heading, IconButton, Label, Link, LinkButton, NavList, Overlay, PageHeader, ProgressBar, RadioGroup, RelativeTime, SegmentedControl, Select, Spinner, StateLabel, SubNav, Text, TextInput, Textarea, ThemeProvider, Timeline, ToggleSwitch, Token, Tooltip, Truncate, UnderlineNav, merge, sx, theme, get as themeGet, useColorSchemeVar, useTheme };

package/dist/packages/styled-react/src/sx.js

@@ -0,0 +1,11 @@
+import { __toESM } from "../../../_virtual/rolldown_runtime.js";
+import { require_cjs } from "../../../node_modules/deepmerge/dist/cjs.js";
+import css from "@styled-system/css";
+
+//#region src/sx.ts
+var import_cjs = /* @__PURE__ */ __toESM(require_cjs());
+const sx = (props) => css(props.sx);
+var sx_default = sx;
+
+//#endregion
+export { sx_default as default, import_cjs, sx };

package/dist/packages/styled-react/src/theme-get.js

@@ -0,0 +1,10 @@
+import * as styledSystem from "styled-system";
+import { theme } from "@primer/react";
+import { themeGet } from "@styled-system/theme-get";
+
+//#region src/theme-get.ts
+const { get: getKey } = styledSystem;
+const get = (key) => themeGet(key, getKey(theme, key));
+
+//#endregion
+export { get };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "0.0.0-20251202212638",
+  "version": "0.0.0-20251202220556",
   "type": "module",
   "exports": {
     ".": {
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@primer/react": "0.0.0-20251202212638",
+    "@primer/react": "0.0.0-20251202220556",
     "@rollup/plugin-babel": "^6.1.0",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
@@ -54,13 +54,13 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "4.53.3",
+    "rolldown": "^1.0.0-beta.52",
     "rollup-plugin-typescript2": "^0.36.0",
     "styled-components": "5.3.11",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@primer/react": "0.0.0-20251202212638",
+    "@primer/react": "0.0.0-20251202220556",
     "@types/react": "18.x || 19.x",
     "@types/react-dom": "18.x || 19.x",
     "@types/react-is": "18.x || 19.x",

package/dist/components/ActionList.js

@@ -1,163 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { ActionList as ActionList$1 } from '@primer/react';
-import sx from '../sx.js';
-import { jsx } from 'react/jsx-runtime';
-
-const StyledActionList = styled(ActionList$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionList",
-  componentId: "sc-hw2362-0"
-})(["", ""], sx);
-const ActionListImpl = /*#__PURE__*/React.forwardRef(function ActionListImpl({
-  as,
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsx(StyledActionList, {
-    ref: ref,
-    ...rest,
-    ...(as ? {
-      forwardedAs: as
-    } : {})
-  });
-});
-const StyledActionListLinkItem = styled(ActionList$1.LinkItem).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListLinkItem",
-  componentId: "sc-hw2362-1"
-})(["", ""], sx);
-const ActionListLinkItem = /*#__PURE__*/React.forwardRef(({
-  children,
-  as,
-  ...props
-}, ref) => /*#__PURE__*/jsx(StyledActionListLinkItem, {
-  ref: ref,
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  children: children
-}));
-ActionListLinkItem.displayName = 'ActionList.LinkItem';
-const StyledActionListTrailingAction = styled(ActionList$1.TrailingAction).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListTrailingAction",
-  componentId: "sc-hw2362-2"
-})(["", ""], sx);
-const ActionListTrailingAction = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    as,
-    ...rest
-  } = props;
-  return /*#__PURE__*/jsx(StyledActionListTrailingAction, {
-    ...rest,
-    ...(as ? {
-      forwardedAs: as
-    } : {}),
-    ref: ref
-  });
-});
-const StyledActionListItem = styled(ActionList$1.Item).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListItem",
-  componentId: "sc-hw2362-3"
-})(["", ""], sx);
-const ActionListItem = /*#__PURE__*/React.forwardRef(({
-  children,
-  as,
-  ...props
-}, ref) => /*#__PURE__*/jsx(StyledActionListItem, {
-  ref: ref,
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  children: children
-}));
-const StyledActionListGroup = styled(ActionList$1.Group).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListGroup",
-  componentId: "sc-hw2362-4"
-})(["", ""], sx);
-const ActionListGroup = ({
-  children,
-  as,
-  ...props
-}) => /*#__PURE__*/jsx(StyledActionListGroup, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  children: children
-});
-ActionListGroup.displayName = 'ActionList.Group';
-const ActionListDivider = styled(ActionList$1.Divider).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__ActionListDivider",
-  componentId: "sc-hw2362-5"
-})(["", ""], sx);
-const StyledActionListLeadingVisual = styled(ActionList$1.LeadingVisual).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListLeadingVisual",
-  componentId: "sc-hw2362-6"
-})(["", ""], sx);
-const ActionListLeadingVisual = ({
-  children,
-  as,
-  ...props
-}) => /*#__PURE__*/jsx(StyledActionListLeadingVisual, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  children: children
-});
-ActionListLeadingVisual.displayName = 'ActionList.LeadingVisual';
-const StyledActionListTrailingVisual = styled(ActionList$1.TrailingVisual).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListTrailingVisual",
-  componentId: "sc-hw2362-7"
-})(["", ""], sx);
-const ActionListTrailingVisual = ({
-  children,
-  as,
-  ...props
-}) => /*#__PURE__*/jsx(StyledActionListTrailingVisual, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  children: children
-});
-ActionListTrailingVisual.displayName = 'ActionList.TrailingVisual';
-const ActionList = Object.assign(ActionListImpl, {
-  Item: ActionListItem,
-  LinkItem: ActionListLinkItem,
-  Group: ActionListGroup,
-  GroupHeading: ActionList$1.GroupHeading,
-  Divider: ActionListDivider,
-  Description: ActionList$1.Description,
-  LeadingVisual: ActionListLeadingVisual,
-  TrailingVisual: ActionListTrailingVisual,
-  Heading: ActionList$1.Heading,
-  TrailingAction: ActionListTrailingAction
-});
-
-// Assign slot markers after component definitions
-ActionListItem.__SLOT__ = ActionList$1.Item.__SLOT__;
-ActionListLinkItem.__SLOT__ = ActionList$1.LinkItem.__SLOT__;
-ActionListGroup.__SLOT__ = ActionList$1.Group.__SLOT__;
-ActionListDivider.__SLOT__ = ActionList$1.Divider.__SLOT__;
-ActionListLeadingVisual.__SLOT__ = ActionList$1.LeadingVisual.__SLOT__;
-ActionListTrailingVisual.__SLOT__ = ActionList$1.TrailingVisual.__SLOT__;
-ActionListTrailingAction.__SLOT__ = ActionList$1.TrailingAction.__SLOT__;
-
-export { ActionList };

package/dist/components/ActionMenu.js

@@ -1,19 +0,0 @@
-import { ActionMenu as ActionMenu$1 } from '@primer/react';
-import sx from '../sx.js';
-import styled from 'styled-components';
-
-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
-});
-ActionMenuOverlay.__SLOT__ = ActionMenu$1.Overlay.__SLOT__;
-
-export { ActionMenu };

package/dist/components/Autocomplete.js

@@ -1,25 +0,0 @@
-import { Autocomplete as Autocomplete$1 } from '@primer/react';
-import sx from '../sx.js';
-import styled from 'styled-components';
-
-const AutocompleteOverlay = styled(Autocomplete$1.Overlay).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Autocomplete__AutocompleteOverlay",
-  componentId: "sc-j8ax2e-0"
-})(["", ""], sx);
-const AutocompleteInput = styled(Autocomplete$1.Input).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Autocomplete__AutocompleteInput",
-  componentId: "sc-j8ax2e-1"
-})(["", ""], sx);
-const Autocomplete = Object.assign(Autocomplete$1, {
-  Context: Autocomplete$1.Context,
-  Input: AutocompleteInput,
-  Menu: Autocomplete$1.Menu,
-  Overlay: AutocompleteOverlay
-});
-AutocompleteOverlay.__SLOT__ = Autocomplete$1.Overlay.__SLOT__;
-
-export { Autocomplete };

package/dist/components/Avatar.js

@@ -1,14 +0,0 @@
-import { Avatar as Avatar$1 } from '@primer/react';
-import { forwardRef } from 'react';
-import Box from './Box.js';
-import { jsx } from 'react/jsx-runtime';
-
-const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Avatar$1,
-    ref: ref,
-    ...props
-  });
-});
-
-export { Avatar };

package/dist/components/Box.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-import { space, color, typography, layout, flexbox, grid, background, border, position, shadow } from 'styled-system';
-import sx from '../sx.js';
-
-/**
- * @deprecated The Box component is deprecated. Replace with a `div` or
- * appropriate HTML element instead, with CSS modules for styling.
- * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
- */
-const Box = styled.div.withConfig({
-  displayName: "Box",
-  componentId: "sc-62in7e-0"
-})(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
-
-export { Box, Box as default };

package/dist/components/Breadcrumbs.js

@@ -1,38 +0,0 @@
-import { Breadcrumbs as Breadcrumbs$1 } from '@primer/react';
-import sx from '../sx.js';
-import styled from 'styled-components';
-import { jsx } from 'react/jsx-runtime';
-
-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;
-
-export { Breadcrumb, Breadcrumbs };

package/dist/components/Button.js

@@ -1,112 +0,0 @@
-import { Button } from '@primer/react';
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import sx from '../sx.js';
-import { jsx } from 'react/jsx-runtime';
-
-const StyledButtonComponent = styled(Button).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Button__StyledButtonComponent",
-  componentId: "sc-vqy3e4-0"
-})(["", ""], sx);
-const ButtonComponent = /*#__PURE__*/forwardRef(({
-  as,
-  sx,
-  style: propStyle,
-  ...props
-}, ref) => {
-  const {
-    block,
-    size = 'medium',
-    leadingVisual,
-    trailingVisual,
-    trailingAction
-  } = props;
-  let sxStyles = {};
-  const style = {
-    ...(propStyle || {})
-  };
-  if (sx !== null && Object.keys(sx || {}).length > 0) {
-    sxStyles = generateCustomSxProp({
-      block,
-      size,
-      leadingVisual,
-      trailingVisual,
-      trailingAction
-    }, sx);
-    const {
-      color
-    } = sx;
-    if (color) style['--button-color'] = color;
-  }
-  return /*#__PURE__*/jsx(StyledButtonComponent, {
-    style: style,
-    sx: sxStyles,
-    ref: ref,
-    ...props,
-    ...(as ? {
-      forwardedAs: as
-    } : {})
-  });
-});
-
-// This function is used to generate a custom cssSelector for the sxProp
-
-// The usual sx prop can like this:
-// sx={{
-//   [`@media (max-width: 768px)`]: {
-//     '& > ul': {
-//       backgroundColor: 'deeppink',
-//     },
-//     '&:hover': {
-//       backgroundColor: 'yellow',
-//     },
-//   },
-//  '&:hover': {
-//     backgroundColor: 'yellow',
-//   },
-//  '&': {
-//  width : 320px
-// }
-// }}
-//*
-/* What we want for Button styles is this:
-sx={{
-//   [`@media (max-width: 768px)`]: {
-//     '&[data-attribute="something"] > ul': {
-//       backgroundColor: 'deeppink',
-//     },
-//     '&[data-attribute="something"]:hover': {
-//       backgroundColor: 'yellow',
-//     },
-//   },
-//  '&[data-attribute="something"]:hover': {
-//     backgroundColor: 'yellow',
-//   },
-//  '&[data-attribute="something"]': {
-//     width : 320px
-//  }
-// }}
-
-// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
-*/
-function generateCustomSxProp(props, providedSx) {
-  // Possible data attributes: data-size, data-block, data-no-visuals
-  const size = `[data-size="${props.size}"]`;
-  const block = props.block ? `[data-block="block"]` : '';
-  const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]';
-
-  // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
-  const cssSelector = `&${size}${block}${noVisuals}`; // &[data-size="small"][data-block="block"][data-no-visuals]
-
-  const customSxProp = {};
-  if (!providedSx) return customSxProp;else {
-    customSxProp[cssSelector] = providedSx;
-    return customSxProp;
-  }
-}
-ButtonComponent.displayName = 'Button';
-ButtonComponent.__SLOT__ = Button.__SLOT__;
-
-export { ButtonComponent, generateCustomSxProp };

package/dist/components/Checkbox.js

@@ -1,15 +0,0 @@
-import { Checkbox as Checkbox$1 } from '@primer/react';
-import Box from './Box.js';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Checkbox$1,
-    ref: ref,
-    ...props
-  });
-});
-Checkbox.__SLOT__ = Checkbox$1.__SLOT__;
-
-export { Checkbox };

package/dist/components/CheckboxGroup.js

@@ -1,43 +0,0 @@
-import { CheckboxGroup as CheckboxGroup$1 } from '@primer/react';
-import 'react';
-import Box from './Box.js';
-import { jsx } from 'react/jsx-runtime';
-
-const CheckboxGroupImpl = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1,
-    ...props
-  });
-};
-
-// Define local types based on the internal component props
-
-const CheckboxOrRadioGroupLabel = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Label,
-    ...props
-  });
-};
-const CheckboxOrRadioGroupCaption = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Caption,
-    ...props
-  });
-};
-const CheckboxOrRadioGroupValidation = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Validation,
-    ...props
-  });
-};
-const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
-  Label: CheckboxOrRadioGroupLabel,
-  Caption: CheckboxOrRadioGroupCaption,
-  Validation: CheckboxOrRadioGroupValidation
-});
-CheckboxGroupImpl.__SLOT__ = CheckboxGroup$1.__SLOT__;
-CheckboxOrRadioGroupLabel.__SLOT__ = CheckboxGroup$1.Label.__SLOT__;
-CheckboxOrRadioGroupCaption.__SLOT__ = CheckboxGroup$1.Caption.__SLOT__;
-CheckboxOrRadioGroupValidation.__SLOT__ = CheckboxGroup$1.Validation.__SLOT__;
-
-export { CheckboxGroup };

package/dist/components/CircleBadge.js

@@ -1,12 +0,0 @@
-import { CircleBadge as CircleBadge$1 } from '@primer/react';
-import styled from 'styled-components';
-import sx from '../sx.js';
-
-const CircleBadge = styled(CircleBadge$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "CircleBadge",
-  componentId: "sc-1u7lp3v-0"
-})(["", ""], sx);
-
-export { CircleBadge };

package/dist/components/CounterLabel.js

@@ -1,14 +0,0 @@
-import { CounterLabel as CounterLabel$1 } from '@primer/react';
-import Box from './Box.js';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-const CounterLabel = /*#__PURE__*/forwardRef(function CounterLabel(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: CounterLabel$1,
-    ref: ref,
-    ...props
-  });
-});
-
-export { CounterLabel };

package/dist/components/DataTable.js

@@ -1,32 +0,0 @@
-import { Table as Table$1 } from '@primer/react/experimental';
-import sx from '../sx.js';
-import styled from 'styled-components';
-import { jsx } from 'react/jsx-runtime';
-
-const {
-  Container: PrimerDataTableContainer,
-  ...rest
-} = Table$1;
-const StyleDataTableContainer = styled(PrimerDataTableContainer).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "DataTable__StyleDataTableContainer",
-  componentId: "sc-qy1ey2-0"
-})(["", ""], sx);
-function DataTableContainer({
-  as,
-  ...rest
-}) {
-  return /*#__PURE__*/jsx(StyleDataTableContainer, {
-    ...rest,
-    ...(as ? {
-      forwardedAs: as
-    } : {})
-  });
-}
-const Table = Object.assign(Table$1, {
-  Container: DataTableContainer,
-  ...rest
-});
-
-export { Table };