@primer/components 31.0.2-rc.95622264 → 31.2.0-rc.50908ce9

package/lib-esm/stories/Token.stories.js

@@ -7,6 +7,7 @@ import { BaseStyles, ThemeProvider } from '..';
 import Box from '../Box';
 import Token from '../Token/Token';
 import Text from '../Text';
+import { GitBranchIcon } from '@primer/octicons-react';
 export default {
   title: 'Tokens/Default',
   component: Token,
@@ -19,7 +20,7 @@ export default {
     return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
   }]
 };
-const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove'];
+const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual'];
 
 const SingleExampleContainer = ({
   children,
@@ -91,6 +92,18 @@ Interactive.parameters = {
     exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']
   }
 };
+export const WithLeadingVisual = args => {
+  return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(Token, _extends({}, args, {
+    leadingVisual: () => /*#__PURE__*/React.createElement(GitBranchIcon, null)
+  })));
+};
+WithLeadingVisual.displayName = "WithLeadingVisual";
+WithLeadingVisual.storyName = 'with leadingVisual';
+WithLeadingVisual.parameters = {
+  controls: {
+    exclude: [...excludedControlKeys, 'hideRemoveButton']
+  }
+};
 export const WithOnRemoveFn = args => {
   return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(SingleExampleContainer, {
     label: "w/ onRemove passed"

package/lib-esm/sx.d.ts

@@ -1,6 +1,12 @@
-import { SystemStyleObject } from '@styled-system/css';
+import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
+import { ThemeColorPaths, ThemeShadowPaths } from './theme';
+import { ColorProps, ShadowProps } from 'styled-system';
+export declare type BetterCssProperties = {
+    [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
+};
+export declare type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject;
 export interface SxProp {
-    sx?: SystemStyleObject;
+    sx?: BetterSystemStyleObject;
 }
 declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
 export default sx;

package/lib-esm/theme.d.ts

@@ -1,2 +1,80 @@
 import { theme } from './theme-preval';
+import { KeyPaths } from './utils/types/KeyPaths';
 export default theme;
+declare type ThemeColors = {
+    fg: {
+        default: string;
+        muted: string;
+        subtle: string;
+        onEmphasis: string;
+    };
+    canvas: {
+        default: string;
+        overlay: string;
+        inset: string;
+        subtle: string;
+    };
+    border: {
+        default: string;
+        muted: string;
+        subtle: string;
+    };
+    neutral: {
+        emphasisPlus: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    accent: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    success: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    attention: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    severe: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    danger: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    done: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+    sponsors: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle: string;
+    };
+};
+declare type ThemeShadows = {
+    shadow: {
+        small: string;
+        medium: string;
+        large: string;
+        extraLarge: string;
+    };
+};
+export declare type ThemeColorPaths = KeyPaths<ThemeColors>;
+export declare type ThemeShadowPaths = KeyPaths<ThemeShadows>;

package/lib-esm/theme.js

@@ -1,2 +1,3 @@
 import { theme } from './theme-preval';
-export default theme;
+export default theme; // NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
+// were exports from primitives (or a different shape but derived from those exports).

package/lib-esm/utils/types/KeyPaths.d.ts

@@ -0,0 +1,3 @@
+export declare type KeyPaths<O extends Record<string, unknown>> = {
+    [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
+}[keyof O];

package/lib-esm/utils/types/KeyPaths.js

@@ -0,0 +1 @@
+export {};