@foxford/ui 2.27.0 → 2.28.0-beta-8fe57b3-20240527

package/components/ListItem/ListItem.js

@@ -0,0 +1,2 @@
+import e from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as i,cloneElement as r,isValidElement as s}from'react';import{withMergedProps as t}from'../../hocs/withMergedProps.js';import{Icon as n}from'../Icon/Icon.js';import'../Icon/icons.js';import{Skeleton as a}from'../Skeleton/Skeleton.js';import{Text as d}from'../Text/Text.js';import{SIZES as p}from'./constants.js';import{Root as c,Media as l,Content as m,Img as f,Ellipsis as h}from'./style.js';import{jsx as z,Fragment as b,jsxs as u}from'react/jsx-runtime';var y=["size","borderRadius","mediaBorderRadius","controlPosition","captionPosition","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading"];var P=t(i(((i,t)=>{var{size:p="s",borderRadius:P=0,mediaBorderRadius:S="50%",controlPosition:j="left",captionPosition:v="bottom",iconProps:g={},textProps:x={},captionProps:X={},sizeXXS:R,sizeXS:w,sizeS:I,sizeM:L,sizeL:M,sizeXL:A,text:C,children:E,control:k,icon:B,media:T,caption:F,addon:N,onColored:U,disabled:V,loading:W}=i,Z=o(i,y);var q={size:p,sizeXXS:R,sizeXS:w,sizeS:I,sizeM:L,sizeL:M,sizeXL:A};var D={onColored:U,disabled:V};var G='object'==typeof k&&'object'==typeof k.props&&null!==k.props?k.props:{};var[H,J]=Array.isArray(B)?B:[B];var K={appearance:'body',size:'inherit',color:'inherit'};var O={appearance:'body',size:.9,sizeUnits:'em',color:'inherit'};return z(c,e(e(e(e({},q),D),Z),{},{borderRadius:P,mediaBorderRadius:S,ref:t,children:'function'==typeof E?E({textProps:K,captionProps:O}):z(b,{children:u(b,W?{children:[T&&z(l,{children:z(a,{width:"100%",height:"100%",borderRadius:"inherit"})}),z(m,{children:z(a,{width:"100%",borderRadius:4,children:z(d,e(e({},K),x))})})]}:{children:[k&&'left'===j&&('function'==typeof k?k(e(e({},q),D)):r(k,e(e(e({},q),D),G))),H&&z(n,e({preset:"brand",name:'string'==typeof H?H:void 0,icon:'string'!=typeof H?H:void 0},g)),T&&z(l,{children:s(T)?T:z(f,e({alt:""},T))}),u(m,{children:[F&&'top'===v&&z(h,e(e(e({forwardedAs:"span"},O),X),{},{children:F})),z(h,e(e(e({forwardedAs:"span"},K),x),{},{children:null!=E?E:C})),F&&'bottom'===v&&z(h,e(e(e({forwardedAs:"span"},O),X),{},{children:F}))]}),N,J&&z(n,e({preset:"brand",name:'string'==typeof J?J:void 0,icon:'string'!=typeof J?J:void 0},g)),k&&'right'===j&&('function'==typeof k?k(e(e({},q),D)):r(k,e(e(e({},q),D),G)))]})})}))})),{displayName:'ListItem',sizes:p});export{P as ListItem};
+//# sourceMappingURL=ListItem.js.map

package/components/ListItem/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import { forwardRef, cloneElement, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { ListItemProps } from './types'\n\nconst COMPONENT_NAME = 'ListItem'\n\n/**\n *\n * Component accepts all root HTML attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [ListItemProps](https://github.com/foxford/ui/blob/master/src/components/ListItem/types.ts)\n */\nconst ListItem: React.ForwardRefExoticComponent<ListItemProps> = withMergedProps<ListItemProps>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      borderRadius = 0,\n      mediaBorderRadius = '50%',\n      controlPosition = 'left',\n      captionPosition = 'bottom',\n      iconProps = {},\n      textProps = {},\n      captionProps = {},\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      text,\n      children,\n      control,\n      icon,\n      media,\n      caption,\n      addon,\n      onColored,\n      disabled,\n      loading,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const stateProps = {\n      onColored,\n      disabled,\n    }\n\n    const controlProps =\n      typeof control === 'object' && typeof control.props === 'object' && control.props !== null ? control.props : {}\n\n    const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n    const textBaseProps: TextProps = { appearance: 'body', size: 'inherit', color: 'inherit' }\n\n    const captionBaseProps: TextProps = { appearance: 'body', size: 0.9, sizeUnits: 'em', color: 'inherit' }\n\n    return (\n      <Styled.Root\n        {...sizeProps}\n        {...stateProps}\n        {...restProps}\n        borderRadius={borderRadius}\n        mediaBorderRadius={mediaBorderRadius}\n        ref={ref}\n      >\n        {typeof children === 'function' ? (\n          children({\n            textProps: textBaseProps,\n            captionProps: captionBaseProps,\n          })\n        ) : (\n          <>\n            {loading ? (\n              <>\n                {media && (\n                  <Styled.Media>\n                    <Skeleton width='100%' height='100%' borderRadius='inherit' />\n                  </Styled.Media>\n                )}\n                <Styled.Content>\n                  <Skeleton width='100%' borderRadius={4}>\n                    <Text {...textBaseProps} {...textProps} />\n                  </Skeleton>\n                </Styled.Content>\n              </>\n            ) : (\n              <>\n                {control &&\n                  controlPosition === 'left' &&\n                  (typeof control === 'function'\n                    ? control({ ...sizeProps, ...stateProps })\n                    : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\n                {before && (\n                  <Icon\n                    preset='brand'\n                    name={typeof before === 'string' ? before : undefined}\n                    icon={typeof before !== 'string' ? before : undefined}\n                    {...iconProps}\n                  />\n                )}\n                {media && (\n                  <Styled.Media>{isValidElement(media) ? media : <Styled.Img alt='' {...media} />}</Styled.Media>\n                )}\n                <Styled.Content>\n                  {caption && captionPosition === 'top' && (\n                    <Styled.Ellipsis forwardedAs='span' {...captionBaseProps} {...captionProps}>\n                      {caption}\n                    </Styled.Ellipsis>\n                  )}\n                  <Styled.Ellipsis forwardedAs='span' {...textBaseProps} {...textProps}>\n                    {children ?? text}\n                  </Styled.Ellipsis>\n                  {caption && captionPosition === 'bottom' && (\n                    <Styled.Ellipsis forwardedAs='span' {...captionBaseProps} {...captionProps}>\n                      {caption}\n                    </Styled.Ellipsis>\n                  )}\n                </Styled.Content>\n                {addon}\n                {after && (\n                  <Icon\n                    preset='brand'\n                    name={typeof after === 'string' ? after : undefined}\n                    icon={typeof after !== 'string' ? after : undefined}\n                    {...iconProps}\n                  />\n                )}\n                {control &&\n                  controlPosition === 'right' &&\n                  (typeof control === 'function'\n                    ? control({ ...sizeProps, ...stateProps })\n                    : cloneElement(control, { ...sizeProps, ...stateProps, ...controlProps }))}\n              </>\n            )}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { ListItem }\n"],"names":["ListItem","withMergedProps","forwardRef","props","ref","size","borderRadius","mediaBorderRadius","controlPosition","captionPosition","iconProps","textProps","captionProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","text","children","control","icon","media","caption","addon","onColored","disabled","loading","restProps","_excluded","sizeProps","stateProps","controlProps","before","after","Array","isArray","textBaseProps","appearance","color","captionBaseProps","sizeUnits","_jsx","Styled.Root","_Fragment","_jsxs","Styled.Media","Skeleton","width","height","Styled.Content","Text","_objectSpread","cloneElement","Icon","preset","name","isValidElement","Styled.Img","alt","Styled.Ellipsis","forwardedAs","undefined","displayName","sizes","SIZES"],"mappings":"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"}

package/components/ListItem/constants.js

@@ -0,0 +1,2 @@
+var d={xxxl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},xxl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},xl:{fontSize:20,paddingTop:16,paddingRight:20,paddingBottom:16,paddingLeft:20},l:{fontSize:18,paddingTop:10,paddingRight:16,paddingBottom:10,paddingLeft:16},m:{fontSize:16,paddingTop:8,paddingRight:12,paddingBottom:8,paddingLeft:12},s:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xxs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10},xxxs:{fontSize:14,paddingTop:6,paddingRight:10,paddingBottom:6,paddingLeft:10}};export{d as SIZES};
+//# sourceMappingURL=constants.js.map

package/components/ListItem/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/components/ListItem/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n  xxxl: {\n    fontSize: 20,\n    paddingTop: 16,\n    paddingRight: 20,\n    paddingBottom: 16,\n    paddingLeft: 20,\n  },\n  xxl: {\n    fontSize: 20,\n    paddingTop: 16,\n    paddingRight: 20,\n    paddingBottom: 16,\n    paddingLeft: 20,\n  },\n  xl: {\n    fontSize: 20,\n    paddingTop: 16,\n    paddingRight: 20,\n    paddingBottom: 16,\n    paddingLeft: 20,\n  },\n  l: {\n    fontSize: 18,\n    paddingTop: 10,\n    paddingRight: 16,\n    paddingBottom: 10,\n    paddingLeft: 16,\n  },\n  m: {\n    fontSize: 16,\n    paddingTop: 8,\n    paddingRight: 12,\n    paddingBottom: 8,\n    paddingLeft: 12,\n  },\n  s: {\n    fontSize: 14,\n    paddingTop: 6,\n    paddingRight: 10,\n    paddingBottom: 6,\n    paddingLeft: 10,\n  },\n  xs: {\n    fontSize: 14,\n    paddingTop: 6,\n    paddingRight: 10,\n    paddingBottom: 6,\n    paddingLeft: 10,\n  },\n  xxs: {\n    fontSize: 14,\n    paddingTop: 6,\n    paddingRight: 10,\n    paddingBottom: 6,\n    paddingLeft: 10,\n  },\n  xxxs: {\n    fontSize: 14,\n    paddingTop: 6,\n    paddingRight: 10,\n    paddingBottom: 6,\n    paddingLeft: 10,\n  },\n}\n"],"names":["SIZES","xxxl","fontSize","paddingTop","paddingRight","paddingBottom","paddingLeft","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,SAAU,GACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,IAEfC,IAAK,CACHL,SAAU,GACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,IAEfE,GAAI,CACFN,SAAU,GACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,IAEfG,EAAG,CACDP,SAAU,GACVC,WAAY,GACZC,aAAc,GACdC,cAAe,GACfC,YAAa,IAEfI,EAAG,CACDR,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,IAEfK,EAAG,CACDT,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,IAEfM,GAAI,CACFV,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,IAEfO,IAAK,CACHX,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,IAEfQ,KAAM,CACJZ,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa"}

package/components/ListItem/style.js

@@ -0,0 +1,2 @@
+import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{responsiveSize as t}from'../../mixins/responsive-size.js';import{responsiveMargin as n}from'../../mixins/responsive-margin.js';import{focus as l}from'../../mixins/focus.js';import{createShouldForwardProp as c}from'../../shared/utils/style.js';import{Text as a}from'../Text/Text.js';var d=c((o=>!['danger','active','onColored','mediaBorderRadius','borderRadius'].includes(o)));var s=r.span.withConfig({componentId:"fox-ui__sc-1a62xqm-0"})(["box-sizing:border-box;flex-shrink:0;width:2.2em;height:2.2em;& > *{box-sizing:border-box;width:100%;height:100%;}"]);var i=o=>"\n  color: ".concat(o.color,";\n  background-color: ").concat(o.backgroundColor,";\n  &:hover {\n    color: ").concat(o.colorHover,";\n    background-color: ").concat(o.backgroundColorHover,";\n  }\n\n  & ").concat(s," img {\n    background-color: ").concat(o.mediaPlaceholderColor,";\n  }\n");var m={onColored:{danger:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['alert-error'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['alert-error'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))},secondary:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100-active'],colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))},primary:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100-active'],colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-oncontrast-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))}},default:{danger:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['alert-error'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['alert-error'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['alert-error'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['alert-error'],backgroundColorHover:r.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))},secondary:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100-active'],colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))},primary:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors.transparent,mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),active:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100-active'],colorHover:r.theme.colors['content-brand-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100-active'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['bg-oncolor-hover'],mediaPlaceholderColor:r.theme.colors['bg-oncolor-hover']},r.palette))))}}};var h=r.div.withConfig({shouldForwardProp:d}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),padding:'0.4em 0.8em'})}).withConfig({componentId:"fox-ui__sc-1a62xqm-1"})([""," "," "," "," ",""],(o=>"\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    isolation: isolate;\n    position: relative;\n    cursor: ".concat(o.disabled?'not-allowed':'pointer',";\n    border-radius: ").concat('string'==typeof o.borderRadius?o.borderRadius:"".concat(o.borderRadius,"px"),";\n    border: none;\n    text-decoration: none;\n    appearance: none;\n    text-align: start;\n    width: 100%;\n    min-width: min-content;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n\n    & ").concat(s," {\n      border-radius: ").concat('string'==typeof o.mediaBorderRadius?o.mediaBorderRadius:"".concat(o.mediaBorderRadius,"px"),";\n    }\n\n    & > *:not(:last-child) {\n      margin-right: 12px;\n    }\n  ")),(o=>{var r=o.onColored?m.onColored:m.default;var e=r.primary;return o.secondary&&(e=r.secondary),o.danger&&(e=r.danger),o.disabled?e.disabled:o.active?e.active:e.default}),l,t,n);var b=r.span.withConfig({componentId:"fox-ui__sc-1a62xqm-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;"]);var p=r.img.withConfig({componentId:"fox-ui__sc-1a62xqm-3"})(["box-sizing:border-box;border-radius:inherit;object-fit:contain;"]);var g=r(a).withConfig({componentId:"fox-ui__sc-1a62xqm-4"})(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:100%;width:5ch;"]);export{b as Content,g as Ellipsis,p as Img,s as Media,h as Root};
+//# sourceMappingURL=style.js.map

package/components/ListItem/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../src/components/ListItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Text } from 'components/Text'\nimport type { StyledListItemProps, ListItemPalette } from './types'\n\nconst shouldForwardListItemProp = createShouldForwardProp(\n  (propKey) => !['danger', 'active', 'onColored', 'mediaBorderRadius', 'borderRadius'].includes(propKey)\n)\n\nexport const Media = styled.span`\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 2.2em;\n  height: 2.2em;\n\n  & > * {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n  }\n`\n\nconst template = (palette: ListItemPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  &:hover {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  }\n\n  & ${Media} img {\n    background-color: ${palette.mediaPlaceholderColor};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  onColored: {\n    danger: {\n      disabled: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-oncolor-disabled'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-oncolor-disabled'],\n            backgroundColorHover: props.theme.colors.transparent,\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      active: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-oncolor-primary'],\n            backgroundColor: props.theme.colors['alert-error'],\n            colorHover: props.theme.colors['content-oncolor-primary'],\n            backgroundColorHover: props.theme.colors['alert-error'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      default: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-oncolor-primary'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-oncolor-primary'],\n            backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n    },\n    secondary: {\n      disabled: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-oncolor-disabled'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-oncolor-disabled'],\n            backgroundColorHover: props.theme.colors.transparent,\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      active: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-brand-primary'],\n            backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n            colorHover: props.theme.colors['content-brand-primary'],\n            backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      default: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-oncolor-primary'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-oncolor-primary'],\n            backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n    },\n    primary: {\n      disabled: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-oncolor-disabled'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-oncolor-disabled'],\n            backgroundColorHover: props.theme.colors.transparent,\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      active: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-brand-primary'],\n            backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n            colorHover: props.theme.colors['content-brand-primary'],\n            backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      default: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-oncolor-primary'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-oncolor-primary'],\n            backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n    },\n  },\n  default: {\n    danger: {\n      disabled: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-disabled'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-disabled'],\n            backgroundColorHover: props.theme.colors.transparent,\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      active: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-oncolor-primary'],\n            backgroundColor: props.theme.colors['alert-error'],\n            colorHover: props.theme.colors['content-oncolor-primary'],\n            backgroundColorHover: props.theme.colors['alert-error'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      default: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['alert-error'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['alert-error'],\n            backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n    },\n    secondary: {\n      disabled: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-disabled'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-disabled'],\n            backgroundColorHover: props.theme.colors.transparent,\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      active: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-brand-primary'],\n            backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n            colorHover: props.theme.colors['content-brand-primary'],\n            backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      default: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-brand-primary'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-brand-primary'],\n            backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n    },\n    primary: {\n      disabled: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-disabled'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-disabled'],\n            backgroundColorHover: props.theme.colors.transparent,\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      active: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-brand-primary'],\n            backgroundColor: props.theme.colors['bg-brand-primary-100-active'],\n            colorHover: props.theme.colors['content-brand-primary'],\n            backgroundColorHover: props.theme.colors['bg-brand-primary-100-active'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n      default: css<StyledListItemProps>`\n        ${(props) =>\n          template({\n            color: props.theme.colors['content-onmain-primary'],\n            backgroundColor: props.theme.colors.transparent,\n            colorHover: props.theme.colors['content-onmain-primary'],\n            backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n            mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n            ...props.palette,\n          })}\n      `,\n    },\n  },\n}\n\nexport const Root = styled.div\n  .withConfig<StyledListItemProps>({\n    shouldForwardProp: shouldForwardListItemProp,\n  })\n  .attrs<StyledListItemProps>(<Required<Pick<StyledListItemProps, 'dynamicSizeDeclaration'>>>{\n    dynamicSizeDeclaration: (size, sizeUnits) => ({\n      fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n      padding: '0.4em 0.8em',\n    }),\n  })`\n  ${(props) => `\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    isolation: isolate;\n    position: relative;\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n    border-radius: ${typeof props.borderRadius === 'string' ? props.borderRadius : `${props.borderRadius}px`};\n    border: none;\n    text-decoration: none;\n    appearance: none;\n    text-align: start;\n    width: 100%;\n    min-width: min-content;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n\n    & ${Media} {\n      border-radius: ${\n        typeof props.mediaBorderRadius === 'string' ? props.mediaBorderRadius : `${props.mediaBorderRadius}px`\n      };\n    }\n\n    & > *:not(:last-child) {\n      margin-right: 12px;\n    }\n  `}\n\n  ${(props) => {\n    const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n    let schemaVariant = schema.primary\n\n    if (props.secondary) schemaVariant = schema.secondary\n    if (props.danger) schemaVariant = schema.danger\n\n    if (props.disabled) return schemaVariant.disabled\n    if (props.active) return schemaVariant.active\n\n    return schemaVariant.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n`\n\nexport const Img = styled.img`\n  box-sizing: border-box;\n  border-radius: inherit;\n  object-fit: contain;\n`\n\nexport const Ellipsis = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  min-width: 100%;\n  width: 5ch;\n`\n"],"names":["shouldForwardListItemProp","createShouldForwardProp","propKey","includes","Media","styled","span","withConfig","componentId","template","palette","color","concat","backgroundColor","colorHover","backgroundColorHover","mediaPlaceholderColor","COLOR_SCHEMA","onColored","danger","disabled","css","props","_objectSpread","theme","colors","transparent","active","default","secondary","primary","Root","div","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","borderRadius","mediaBorderRadius","schema","schemaVariant","focus","responsiveSize","responsiveMargin","Content","Img","img","Ellipsis","Text"],"mappings":"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"}

package/dts/index.d.ts

@@ -1095,7 +1095,7 @@ declare global {
 type Action = 'PUSH' | 'POP' | 'REPLACE';
 type UnregisterCallback = () => void;
 
-interface Location<S = LocationState> {
+interface Location$1<S = LocationState> {
     pathname: Pathname;
     search: Search;
     state: S;
@@ -1114,7 +1114,7 @@ interface LocationDescriptorObject<S = LocationState> {
 interface History<HistoryLocationState = LocationState> {
     length: number;
     action: Action;
-    location: Location<HistoryLocationState>;
+    location: Location$1<HistoryLocationState>;
     push(location: Path | LocationDescriptor<HistoryLocationState>, state?: HistoryLocationState): void;
     replace(location: Path | LocationDescriptor<HistoryLocationState>, state?: HistoryLocationState): void;
     go(n: number): void;
@@ -1128,15 +1128,15 @@ interface History<HistoryLocationState = LocationState> {
 declare namespace History {
     export type LocationDescriptor<S = LocationState> = Path | LocationDescriptorObject<S>;
     export type LocationKey = string;
-    export type LocationListener<S = LocationState> = (location: Location<S>, action: Action) => void;
+    export type LocationListener<S = LocationState> = (location: Location$1<S>, action: Action) => void;
 
     export type LocationState = unknown;
     export type Path = string;
     export type Pathname = string;
     export type Search = string;
-    export type TransitionHook<S = LocationState> = (location: Location<S>, callback: (result: any) => void) => any;
+    export type TransitionHook<S = LocationState> = (location: Location$1<S>, callback: (result: any) => void) => any;
     export type TransitionPromptHook<S = LocationState> = (
-        location: Location<S>,
+        location: Location$1<S>,
         action: Action,
     ) => string | false | void;
     export type Hash = string;
@@ -1188,7 +1188,7 @@ DisplayProperty {
     autoRel?: boolean;
     /** Link from react-router-dom will be used.
      *  Look up [docs](https://v5.reactrouter.com/web/api/Link) */
-    to?: string | Partial<Location> | ((location: Location) => string | Partial<Location>);
+    to?: string | Partial<Location$1> | ((location: Location$1) => string | Partial<Location$1>);
     /** Look up react-router-dom [docs](https://v5.reactrouter.com/web/api/Link) */
     replace?: boolean;
     /** Anchor disabled */
@@ -1291,7 +1291,7 @@ ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
     outline?: boolean;
     /** Link from react-router-dom will be used.
      *  Look up [docs](https://v5.reactrouter.com/web/api/Link) */
-    to?: string | Partial<Location> | ((location: Location) => string | Partial<Location>);
+    to?: string | Partial<Location$1> | ((location: Location$1) => string | Partial<Location$1>);
     /** Anchor element will be used */
     href?: string;
     /** Anchor attribute  */
@@ -2098,6 +2098,82 @@ declare const Popover: React.ForwardRefExoticComponent<PopoverProps> & {
     Component: typeof PopoverComponent;
 };
 
+declare type ListItemPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    colorHover: CSSColor;
+    backgroundColorHover: CSSColor;
+    mediaPlaceholderColor: CSSColor;
+};
+interface ListItemProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type'>, Omit<React.AnchorHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type' | 'media'> {
+    /** Root node polymorphic type */
+    as?: 'button' | 'label' | 'a' | React.ComponentType<any>;
+    /** Main text content or render function */
+    children?: React.ReactNode | ((props: Required<Pick<ListItemProps, 'textProps' | 'captionProps'>>) => React.ReactNode);
+    /** Control to render (checkbox, radio, button, etc.) */
+    control?: JSX.Element | ((props: Required<Pick<ListItemProps, 'size'>> & Pick<ListItemProps, 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'onColored' | 'disabled'>) => JSX.Element);
+    /** Control position on horizontal axis */
+    controlPosition?: 'left' | 'right';
+    /** Icons before and after content */
+    icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
+    /** Props for icon components */
+    iconProps?: IconProps;
+    /** Media to display */
+    media?: React.ComponentPropsWithoutRef<'img'> | JSX.Element;
+    /** Media border-radius */
+    mediaBorderRadius?: string | number;
+    /** Main text (alternative to children) */
+    text?: React.ReactNode;
+    /** Props for main text component */
+    textProps?: TextProps;
+    /** Additional text */
+    caption?: React.ReactNode;
+    /** Props for caption text component */
+    captionProps?: TextProps;
+    /** Caption position relative to main text */
+    captionPosition?: 'top' | 'bottom';
+    /** Additional components */
+    addon?: React.ReactNode;
+    /** Custom colors */
+    palette?: Partial<Record<keyof ListItemPalette, Color>>;
+    /** Root border-radius */
+    borderRadius?: string | number;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    danger?: boolean;
+    /** Appearance variant */
+    active?: boolean;
+    /** Appearance variant */
+    onColored?: boolean;
+    /** Appearance variant */
+    disabled?: boolean;
+    /** Appearance variant */
+    loading?: boolean;
+    /** @ignore */
+    to?: string | Partial<Location> | ((location: Location) => string | Partial<Location>);
+    /** @ignore */
+    replace?: boolean;
+    /** @ignore */
+    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
+    /** @ignore */
+    type?: string;
+}
+
+/**
+ *
+ * Component accepts all root HTML attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [ListItemProps](https://github.com/foxford/ui/blob/master/src/components/ListItem/types.ts)
+ */
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps>;
+
 interface Theme {
     breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
     colors: Record<keyof typeof ColorNames, CSSColor>;
@@ -2136,6 +2212,7 @@ interface Theme {
         TooltipComponent?: TooltipComponentProps;
         Popover?: PopoverProps;
         PopoverComponent?: PopoverComponentProps;
+        ListItem?: ListItemProps;
     };
 }
 
@@ -3761,4 +3838,4 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
  */
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, ListItem, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };