@primer/components 0.0.0-202191514518 → 0.0.0-20219153411

package/lib-esm/SelectMenu/SelectMenuItem.js

@@ -7,7 +7,7 @@ import { COMMON, get } from '../constants';
 import StyledOcticon from '../StyledOcticon';
 import sx from '../sx';
 import { MenuContext } from './SelectMenuContext';
-export const listItemStyles = css(["display:flex;align-items:center;padding:", ";overflow:hidden;text-align:left;cursor:pointer;background-color:", ";border:0;border-bottom:", " solid ", ";color:", ";text-decoration:none;font-size:", ";font-family:inherit;width:100%;&:hover{text-decoration:none;}&:focus{outline:none;}&[hidden]{display:none !important;}@media (min-width:", "){padding-top:", ";padding-bottom:", ";}.SelectMenu-icon{width:", ";margin-right:", ";flex-shrink:0;}.SelectMenu-selected-icon{visibility:hidden;transition:transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;transform:scale(0);}&[aria-checked='true']{font-weight:500;color:", ";.SelectMenu-selected-icon{visibility:visible;transition:transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;transform:scale(1);}}@media (hover:hover){&:hover,&:active,&:focus{background-color:", ";}}@media (hover:none){&:focus,&:active{background-color:", ";}-webkit-tap-highlight-color:", ";}"], get('space.3'), get('colors.canvas.overlay'), get('borderWidths.1'), get('colors.border.muted'), get('colors.fg.muted'), get('fontSizes.0'), get('breakpoints.0'), get('space.2'), get('space.2'), get('space.3'), get('space.2'), get('colors.fg.default'), get('colors.neutral.subtle'), get('colors.canvas.subtle'), get('colors.selectMenu.tapHighlight'));
+export const listItemStyles = css(["display:flex;align-items:center;padding:", ";overflow:hidden;text-align:left;cursor:pointer;background-color:", ";border:0;border-bottom:", " solid ", ";color:", ";text-decoration:none;font-size:", ";font-family:inherit;width:100%;&:hover{text-decoration:none;}&:focus{outline:none;}&[hidden]{display:none !important;}@media (min-width:", "){padding-top:", ";padding-bottom:", ";}.SelectMenu-icon{width:", ";margin-right:", ";flex-shrink:0;}.SelectMenu-selected-icon{visibility:hidden;transition:transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;transform:scale(0);}&[aria-checked='true']{font-weight:500;color:", ";.SelectMenu-selected-icon{visibility:visible;transition:transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;transform:scale(1);}}@media (hover:hover){&:hover,&:active,&:focus{background-color:", ";}}@media (hover:none){&:focus,&:active{background-color:", ";}-webkit-tap-highlight-color:", ";}"], get('space.3'), get('colors.canvas.overlay'), get('borderWidths.1'), get('colors.border.muted'), get('colors.primer.fg.disabled'), get('fontSizes.0'), get('breakpoints.0'), get('space.2'), get('space.2'), get('space.3'), get('space.2'), get('colors.fg.default'), get('colors.neutral.subtle'), get('colors.canvas.subtle'), get('colors.selectMenu.tapHighlight'));
 const StyledItem = styled.a.attrs(() => ({
   role: 'menuitemcheckbox'
 })).withConfig({

package/lib-esm/SelectMenu/SelectMenuTab.js

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { COMMON, get } from '../constants';
 import sx from '../sx';
 import { MenuContext } from './SelectMenuContext';
-const tabStyles = css(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:transparent;border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.fg.muted'), get('colors.border.muted'), get('breakpoints.0'), get('space.1'), get('space.3'), get('borderWidths.1'), get('radii.2'), get('radii.2'), get('colors.text-primary'), get('colors.canvas.overlay'), get('colors.border.muted'), get('breakpoints.0'), get('colors.border.muted'), get('colors.neutral.subtle'));
+const tabStyles = css(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:transparent;border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.primer.fg.disabled'), get('colors.border.muted'), get('breakpoints.0'), get('space.1'), get('space.3'), get('borderWidths.1'), get('radii.2'), get('radii.2'), get('colors.text-primary'), get('colors.canvas.overlay'), get('colors.border.muted'), get('breakpoints.0'), get('colors.border.muted'), get('colors.neutral.subtle'));
 const StyledTab = styled.button.withConfig({
   displayName: "SelectMenuTab__StyledTab",
   componentId: "ga32sz-0"

package/lib-esm/SubNav.js

@@ -47,7 +47,7 @@ const SubNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "SubNav__SubNavLink",
   componentId: "f7w0xa-1"
-})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.3'), get('fontWeights.semibold'), get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('colors.border.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.subtle'), get('colors.fg.muted'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'), COMMON, sx);
+})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.3'), get('fontWeights.semibold'), get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('colors.border.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.subtle'), get('colors.primer.fg.disabled'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'), COMMON, sx);
 SubNavLink.displayName = 'SubNav.Link';
 SubNavLinks.displayName = 'SubNav.Links';
 export default Object.assign(SubNav, {

package/lib-esm/Timeline.js

@@ -15,7 +15,7 @@ const TimelineItem = styled(Box).attrs(props => ({
 })).withConfig({
   displayName: "Timeline__TimelineItem",
   componentId: "c4dq2e-1"
-})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], get('space.3'), get('space.3'), get('colors.border.muted'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.fg.muted'), get('colors.canvas.default')), COMMON, sx);
+})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], get('space.3'), get('space.3'), get('colors.border.muted'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.primer.fg.disabled'), get('colors.canvas.default')), COMMON, sx);
 
 const TimelineBadge = props => {
   return /*#__PURE__*/React.createElement(Box, {
@@ -45,7 +45,7 @@ TimelineBadge.displayName = "TimelineBadge";
 const TimelineBody = styled(Box).withConfig({
   displayName: "Timeline__TimelineBody",
   componentId: "c4dq2e-2"
-})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.fg.muted'), get('fontSizes.1'), sx);
+})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.primer.fg.disabled'), get('fontSizes.1'), sx);
 const TimelineBreak = styled(Box).withConfig({
   displayName: "Timeline__TimelineBreak",
   componentId: "c4dq2e-3"

package/lib-esm/Token/Token.js

@@ -11,7 +11,7 @@ const tokenBorderWidthPx = 1;
 const DefaultTokenStyled = styled(TokenBase).withConfig({
   displayName: "Token__DefaultTokenStyled",
   componentId: "sc-1dg52pw-0"
-})(["background-color:", ";border-color:", ";border-style:solid;border-width:", "px;color:", ";max-width:100%;padding-right:", ";position:relative;", " ", ""], get('colors.neutral.subtle'), props => props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'), tokenBorderWidthPx, props => props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'), props => !props.hideRemoveButton ? 0 : undefined, sx, props => {
+})(["background-color:", ";border-color:", ";border-style:solid;border-width:", "px;color:", ";max-width:100%;padding-right:", ";position:relative;", " ", ""], get('colors.neutral.subtle'), props => props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'), tokenBorderWidthPx, props => props.isSelected ? get('colors.fg.default') : get('colors.primer.fg.disabled'), props => !props.hideRemoveButton ? 0 : undefined, sx, props => {
   if (props.isTokenInteractive) {
     return css(["&:hover{background-color:", ";box-shadow:", ";color:", ";}"], get('colors.neutral.muted'), get('colors.shadow.medium'), get('colors.fg.default'));
   }

package/lib-esm/UnderlineNav.js

@@ -42,7 +42,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
   componentId: "zrnxqt-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), COMMON, sx);
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.primer.fg.disabled'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), COMMON, sx);
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 export default Object.assign(UnderlineNav, {
   Link: UnderlineNavLink

package/lib-esm/_TextInputWrapper.js

@@ -27,5 +27,5 @@ const TextInputWrapper = styled.span.withConfig({
   } else {
     return css(["padding:6px 12px;"]);
   }
-}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
+}, get('colors.primer.fg.disabled'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
 export default TextInputWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202191514518",
+  "version": "0.0.0-20219153411",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/lib/ActionList2/Description.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare type DescriptionProps = {
-    variant?: 'inline' | 'block';
-};
-export declare const Description: React.FC<DescriptionProps>;

package/lib/ActionList2/Description.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Description = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Truncate = _interopRequireDefault(require("../Truncate"));
-
-var _Item = require("./Item");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Description = ({
-  variant = 'inline',
-  ...props
-}) => {
-  const {
-    registerSlot
-  } = _react.default.useContext(_Item.ItemContext);
-
-  const slotName = variant === 'block' ? 'BlockDescription' : 'InlineDescription';
-  const styles = {
-    color: 'fg.muted',
-    fontSize: 0,
-    lineHeight: '16px',
-    flexGrow: 1,
-    flexBasis: 0,
-    minWidth: 0,
-    marginLeft: variant === 'block' ? 0 : 2
-  };
-
-  if (variant === 'block') {
-    registerSlot(slotName, /*#__PURE__*/_react.default.createElement(_Box.default, {
-      as: "span",
-      sx: styles
-    }, props.children));
-  } else {
-    registerSlot(slotName, /*#__PURE__*/_react.default.createElement(_Truncate.default, {
-      sx: styles,
-      title: props.children,
-      inline: true,
-      maxWidth: "100%"
-    }, props.children));
-  }
-
-  return null;
-};
-
-exports.Description = Description;

package/lib/ActionList2/Divider.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-export declare function Divider(): JSX.Element;
-export declare namespace Divider {
-    var renderItem: typeof Divider;
-}

package/lib/ActionList2/Divider.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Divider = Divider;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _constants = require("../constants");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-function Divider() {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    as: "hr",
-    sx: {
-      border: 'none',
-      // override browser styles
-      height: 1,
-      backgroundColor: 'border.muted',
-      marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
-      marginBottom: 2
-    },
-    "data-component": "ActionList.Divider"
-  });
-}
-
-Divider.displayName = "Divider";
-
-/**
- * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
- * so it can be used inline in an `ActionList`’s `items` prop.
- * In other words, `items={[ActionList.Divider]}` is supported as a concise
- * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
- */
-Divider.renderItem = Divider;

package/lib/ActionList2/Group.d.ts

@@ -1,8 +0,0 @@
-/**
- * show item dividers
- */
-/// <reference types="react" />
-import { SxProp } from '../sx';
-import { HeaderProps } from './Header';
-export declare type GroupProps = HeaderProps & SxProp;
-export declare function Group({ title, variant, auxiliaryText, sx, ...props }: GroupProps): JSX.Element;

package/lib/ActionList2/Group.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Group = Group;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Header = require("./Header");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function Group({
-  title,
-  variant,
-  auxiliaryText,
-  sx = {},
-  ...props
-}) {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    sx: {
-      '&:not(:first-child)': {
-        marginTop: 2
-      },
-      ...sx
-    }
-  }, props), title && /*#__PURE__*/_react.default.createElement(_Header.Header, {
-    title: title,
-    variant: variant,
-    auxiliaryText: auxiliaryText
-  }), props.children);
-}
-
-Group.displayName = "Group";

package/lib/ActionList2/Header.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import { SxProp } from '../sx';
-/**
- * Contract for props passed to the `Header` component.
- */
-export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
-    /**
-     * Style variations. Usage is discretionary.
-     *
-     * - `"filled"` - Superimposed on a background, offset from nearby content
-     * - `"subtle"` - Relatively less offset from nearby content
-     */
-    variant?: 'subtle' | 'filled';
-    /**
-     * Primary text which names a `Group`.
-     */
-    title?: string;
-    /**
-     * Secondary text which provides additional information about a `Group`.
-     */
-    auxiliaryText?: string;
-}
-/**
- * Displays the name and description of a `Group`.
- */
-export declare function Header({ variant, title, auxiliaryText, children: _children, sx, ...props }: HeaderProps): JSX.Element;

package/lib/ActionList2/Header.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Header = Header;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _List = require("./List");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-/**
- * Displays the name and description of a `Group`.
- */
-function Header({
-  variant = 'subtle',
-  title,
-  auxiliaryText,
-  children: _children,
-  sx = {},
-  ...props
-}) {
-  const {
-    variant: listVariant
-  } = _react.default.useContext(_List.ListContext);
-
-  const styles = {
-    paddingY: '6px',
-    paddingX: listVariant === 'full' ? 2 : 3,
-    fontSize: 0,
-    fontWeight: 'bold',
-    color: 'fg.muted',
-    ...(variant === 'filled' && {
-      backgroundColor: 'canvas.subtle',
-      marginX: 0,
-      marginBottom: 2,
-      borderTop: '1px solid',
-      borderBottom: '1px solid',
-      borderColor: 'neutral.muted'
-    }),
-    ...sx
-  };
-  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    sx: styles,
-    role: "heading"
-  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, "auxiliaryText"));
-}
-
-Header.displayName = "Header";

package/lib/ActionList2/Item.d.ts

@@ -1,52 +0,0 @@
-/**
- * id, role
- * text could be non-text
- * activeDescendantAttribute
- * deepmerge sx
- * nicer name for showDivider?
- * aria-label
- * aria-describedby
- * React.FC<Props> doesn't allow id?
- * truncate description
- * icon color
- * disabled checkbox
- * check height with divider
- *
- * use immediate child slot API instead of double render?
- * change as= li | div based on context of menu or not?
- * check if everyone accepts sx prop
- * link example outside of overlay? (details)
- * if one item has selected, should we give all of them selected without the need to pass prop?
- * move custom item themes to primitives?
- * padding: 8 or 6?
- * ActionList.Selection or ActionList.Item selected?
- * different size for icon and avatar, range?
- * minimize number of divs?
- */
-import React from 'react';
-import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
-import { SxProp } from '../sx';
-export declare const getVariantStyles: (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
-    color: (props: any) => any;
-    iconColor: (props: any) => any;
-    annotationColor: (props: any) => any;
-} | {
-    color: string;
-    iconColor: string;
-    annotationColor: string;
-};
-export declare type ItemProps = {
-    children: React.ReactNode;
-    onAction?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;
-    selected?: boolean;
-    variant?: 'default' | 'danger';
-    disabled?: boolean;
-    showDivider?: boolean;
-} & SxProp;
-declare type SlotNames = 'LeadingVisual' | 'InlineDescription' | 'BlockDescription' | 'TrailingVisual';
-declare type ContextProps = {
-    registerSlot: (name: SlotNames, contents: React.ReactNode) => void;
-};
-export declare const ItemContext: React.Context<ContextProps>;
-export declare const Item: PolymorphicForwardRefComponent<"li", ItemProps>;
-export {};

package/lib/ActionList2/Item.js

@@ -1,188 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Item = exports.ItemContext = exports.getVariantStyles = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _constants = require("../constants");
-
-var _List = require("./List");
-
-var _hacks = require("./hacks");
-
-var _Selection = require("./Selection");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const getVariantStyles = (variant, disabled) => {
-  if (disabled) {
-    return {
-      color: (0, _constants.get)('colors.fg.muted'),
-      iconColor: (0, _constants.get)('colors.fg.muted'),
-      annotationColor: (0, _constants.get)('colors.fg.muted')
-    };
-  }
-
-  switch (variant) {
-    case 'danger':
-      return {
-        color: 'danger.fg',
-        iconColor: 'danger.fg',
-        annotationColor: 'fg.muted'
-      };
-
-    default:
-      return {
-        color: 'fg.default',
-        iconColor: 'fg.muted',
-        annotationColor: 'fg.muted'
-      };
-  }
-};
-
-exports.getVariantStyles = getVariantStyles;
-
-const ItemContext = /*#__PURE__*/_react.default.createContext({
-  registerSlot: () => null
-});
-
-exports.ItemContext = ItemContext;
-
-const Item = /*#__PURE__*/_react.default.forwardRef(({
-  variant = 'default',
-  disabled = false,
-  selected = undefined,
-  showDivider = false,
-  onAction = () => null,
-  sx = {},
-  ...props
-}, forwardedRef) => {
-  const customItemTheme = _hacks.customItemThemes[variant];
-
-  const {
-    variant: listVariant
-  } = _react.default.useContext(_List.ListContext);
-
-  const {
-    theme
-  } = (0, _ThemeProvider.useTheme)();
-
-  const [slots, setSlots] = _react.default.useState({
-    LeadingVisual: null,
-    InlineDescription: null,
-    BlockDescription: null,
-    TrailingVisual: null
-  });
-
-  const registerSlot = (name, contents) => {
-    if (slots[name] === null) setSlots({ ...slots,
-      [name]: contents
-    });
-  };
-
-  const styles = {
-    display: 'flex',
-    paddingX: (0, _constants.get)('space.2'),
-    paddingY: '6px',
-    marginX: listVariant === 'inset' ? (0, _constants.get)('space.2') : 0,
-    minHeight: (0, _constants.get)('space.5'),
-    borderRadius: (0, _constants.get)('radii.2'),
-    transition: 'background 33.333ms linear',
-    color: getVariantStyles(variant, disabled).color,
-    textDecoration: 'none',
-    // for as="a"
-    ':not(disabled)': {
-      cursor: 'pointer'
-    },
-    '@media (hover: hover) and (pointer: fine)': {
-      ':hover': {
-        backgroundColor: (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.hover, 'inherit')
-      },
-      ':focus': {
-        backgroundColor: (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.focus, 'inherit')
-      }
-    },
-
-    /** Divider styles */
-    '[data-component="ActionList.Item--Main"]': {
-      position: 'relative'
-    },
-    '[data-component="ActionList.Item--Main"]::before': {
-      content: '" "',
-      display: 'block',
-      position: 'absolute',
-      width: '100%',
-      top: '-7px',
-      border: '0 solid',
-      borderTopWidth: showDivider ? `1px` : '0',
-      borderColor: 'var(--divider-color, transparent)'
-    },
-    // show between 2 items
-    ':not(:first-of-type)': {
-      '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.border.muted
-    },
-    // hide divider after dividers & group header
-    '[data-component="ActionList.Divider"] + &': {
-      '--divider-color': 'transparent'
-    },
-    // hide border on current and previous item
-    '&:hover, &:focus': {
-      '--divider-color': 'transparent'
-    },
-    '&:hover + &, &:focus + &': {
-      '--divider-color': 'transparent'
-    },
-    ...sx
-  };
-
-  const clickHandler = _react.default.useCallback(event => {
-    if (disabled) return;
-    if (!event.defaultPrevented) onAction(event);
-  }, [onAction, disabled]);
-
-  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    as: "li",
-    sx: styles,
-    "data-component": "ActionList.Item",
-    onClick: clickHandler,
-    ref: forwardedRef
-  }, props), /*#__PURE__*/_react.default.createElement(ItemContext.Provider, {
-    value: {
-      registerSlot
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
-    selected: selected,
-    disabled: disabled
-  }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    "data-component": "ActionList.Item--Main",
-    sx: {
-      display: 'flex',
-      flexDirection: 'column',
-      flexGrow: 1,
-      minWidth: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    sx: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    sx: {
-      display: 'flex',
-      flexGrow: 1,
-      alignItems: 'baseline',
-      minWidth: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement("span", null, props.children), slots.InlineDescription), slots.TrailingVisual), slots.BlockDescription)));
-});
-
-exports.Item = Item;
-Item.displayName = 'ActionList.Item';

package/lib/ActionList2/List.d.ts

@@ -1,18 +0,0 @@
-/**
- *
- * showItemDividers
- * deepmerge sx
- * change as= ul | div based on context of menu or not?
- * should selectionVariant be single by default or nothing. ask for explicit choice?
- */
-import React from 'react';
-import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
-import { SxProp } from '../sx';
-export declare type ListProps = {
-    variant?: 'inset' | 'full';
-    selectionVariant?: 'single' | 'multiple';
-} & SxProp;
-declare type ContextProps = Pick<ListProps, 'selectionVariant' | 'variant'>;
-export declare const ListContext: React.Context<ContextProps>;
-export declare const List: PolymorphicForwardRefComponent<"ul", ListProps>;
-export {};