@mobilestock-native/card 0.0.11 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +4 -2
- package/index.js +32 -30
- package/package.json +5 -5
package/index.d.ts
CHANGED
|
@@ -48,12 +48,14 @@ interface CardContextProps {
|
|
|
48
48
|
|
|
49
49
|
type BorderRadius = Exclude<Uppercase<keyof DefaultTheme['borderRadius'] & string>, 'ROUNDED'>;
|
|
50
50
|
type CardStyleProps = Omit<ViewBaseProps, 'color'> & Partial<CardContextProps>;
|
|
51
|
-
interface CardBaseProps extends CardStyleProps, Omit<ViewBaseProps, 'color'> {
|
|
51
|
+
interface CardBaseProps extends CardStyleProps, Omit<ViewBaseProps, 'color' | 'borderRadius'> {
|
|
52
52
|
children: ReactNode;
|
|
53
53
|
borderRadius?: BorderRadius;
|
|
54
|
+
borderWidth?: Uppercase<keyof DefaultTheme['borderWidth'] & string>;
|
|
55
|
+
borderColor?: Uppercase<keyof DefaultTheme['colors']['border'] & string>;
|
|
54
56
|
borderActive?: boolean;
|
|
55
57
|
}
|
|
56
|
-
declare function CardBase({ variant, color, borderRadius, borderActive, ...rest }: CardBaseProps): react_jsx_runtime.JSX.Element;
|
|
58
|
+
declare function CardBase({ variant, color, borderRadius, borderWidth, borderColor, borderActive, ...rest }: CardBaseProps): react_jsx_runtime.JSX.Element;
|
|
57
59
|
|
|
58
60
|
declare const Card: typeof CardBase & {
|
|
59
61
|
Header: (() => never) & {
|
package/index.js
CHANGED
|
@@ -1,73 +1,75 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Po=Object.create;var f=Object.defineProperty,ho=Object.defineProperties,wo=Object.getOwnPropertyDescriptor,Ko=Object.getOwnPropertyDescriptors,vo=Object.getOwnPropertyNames,y=Object.getOwnPropertySymbols,Bo=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty,K=Object.prototype.propertyIsEnumerable;var w=(o,r,t)=>r in o?f(o,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[r]=t,a=(o,r)=>{for(var t in r||(r={}))x.call(r,t)&&w(o,t,r[t]);if(y)for(var t of y(r))K.call(r,t)&&w(o,t,r[t]);return o},p=(o,r)=>ho(o,Ko(r));var c=(o,r)=>{var t={};for(var e in o)x.call(o,e)&&r.indexOf(e)<0&&(t[e]=o[e]);if(o!=null&&y)for(var e of y(o))r.indexOf(e)<0&&K.call(o,e)&&(t[e]=o[e]);return t};var So=(o,r)=>{for(var t in r)f(o,t,{get:r[t],enumerable:!0})},v=(o,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of vo(r))!x.call(o,n)&&n!==t&&f(o,n,{get:()=>r[n],enumerable:!(e=wo(r,n))||e.enumerable});return o};var C=(o,r,t)=>(t=o!=null?Po(Bo(o)):{},v(r||!o||!o.__esModule?f(t,"default",{value:o,enumerable:!0}):t,o)),Eo=o=>v(f({},"__esModule",{value:!0}),o);var Zo={};So(Zo,{Card:()=>Yo});module.exports=Eo(Zo);var S=C(require("styled-components/native")),E=require("@mobilestock-native/container");var $=require("react"),T=(0,$.createContext)(void 0);function s(){let o=(0,$.useContext)(T);if(!o)throw new Error("useCardContext should used inside a CardContext.Provider");return o}var u=C(require("chroma-js")),d=require("styled-components"),b=C(require("@mobilestock-native/tools"));function V(o){return(0,u.default)(o).luminance()<.55?(0,u.default)(o).brighten(3).css():(0,u.default)(o).darken(5).css()}function B(o){return(0,u.default)(o).brighten(3).css()}function Lo(o,r,t,e,n){return d.css`
|
|
2
2
|
border-radius: ${n.borderRadius[t.toLowerCase()]};
|
|
3
3
|
position: relative;
|
|
4
4
|
overflow: hidden;
|
|
5
5
|
|
|
6
|
-
${e&&o!=="OUTLINE"&&
|
|
6
|
+
${e&&o!=="OUTLINE"&&d.css`
|
|
7
7
|
border-width: 1px;
|
|
8
|
-
border-color: ${(0,
|
|
8
|
+
border-color: ${(0,u.default)(n.colors.card[r.toLowerCase()]).darken(1).css()};
|
|
9
9
|
border-style: solid;
|
|
10
10
|
`}
|
|
11
11
|
|
|
12
|
-
${o==="OUTLINE"&&
|
|
12
|
+
${o==="OUTLINE"&&d.css`
|
|
13
13
|
border-width: 2px;
|
|
14
14
|
border-color: ${n.colors.card[r.toLowerCase()]};
|
|
15
15
|
border-style: solid;
|
|
16
16
|
`}
|
|
17
17
|
|
|
18
|
-
${o==="SOLID"&&
|
|
18
|
+
${o==="SOLID"&&d.css`
|
|
19
19
|
background-color: ${n.colors.card[r.toLowerCase()]};
|
|
20
20
|
`}
|
|
21
|
-
`}function Ro(o,r,t){return o==="STRIPED"?
|
|
22
|
-
background-color: ${
|
|
23
|
-
`:
|
|
21
|
+
`}function Ro(o,r,t){return o==="STRIPED"?d.css`
|
|
22
|
+
background-color: ${B(t.colors.card[r.toLowerCase()])};
|
|
23
|
+
`:d.css``}function Do(o,r,t){switch(o){case"STRIPED":return d.css`
|
|
24
24
|
background-color: ${t.colors.card[r.toLowerCase()]};
|
|
25
|
-
`;case"OUTLINE":return
|
|
25
|
+
`;case"OUTLINE":return d.css`
|
|
26
26
|
border-top-width: 1px;
|
|
27
27
|
border-top-color: ${t.colors.card[r.toLowerCase()]};
|
|
28
28
|
border-style: solid;
|
|
29
|
-
`;default:return
|
|
29
|
+
`;default:return d.css``}}function Ho(o){return o?d.css`
|
|
30
30
|
position: absolute;
|
|
31
31
|
top: 0;
|
|
32
32
|
left: 0;
|
|
33
33
|
right: 0;
|
|
34
34
|
background-color: transparent;
|
|
35
35
|
z-index: 10;
|
|
36
|
-
`:
|
|
36
|
+
`:d.css``}function Fo(o,r,t,e){let n=d.css``;switch(o){case"STRIPED":n=d.css`
|
|
37
37
|
background-color: ${e.colors.card[r.toLowerCase()]};
|
|
38
|
-
`;break;case"OUTLINE":n=
|
|
38
|
+
`;break;case"OUTLINE":n=d.css`
|
|
39
39
|
border-bottom-width: 1px;
|
|
40
40
|
border-bottom-color: ${e.colors.card[r.toLowerCase()]};
|
|
41
41
|
border-style: solid;
|
|
42
|
-
`;break;default:n=
|
|
42
|
+
`;break;default:n=d.css``}return d.css`
|
|
43
43
|
${n}
|
|
44
44
|
${Ho(t)}
|
|
45
|
-
`}function
|
|
46
|
-
color: ${o==="OUTLINE"?t.colors.card[r.toLowerCase()]:
|
|
47
|
-
`}function
|
|
45
|
+
`}function No(o,r,t){return d.css`
|
|
46
|
+
color: ${o==="OUTLINE"?t.colors.card[r.toLowerCase()]:b.default.defineTextColor(t.colors.card[r.toLowerCase()])};
|
|
47
|
+
`}function ko(o,r,t,e){return!e&&(o==="OUTLINE"?d.css`
|
|
48
48
|
background-color: ${t.colors.card[r.toLowerCase()]};
|
|
49
|
-
color: ${
|
|
50
|
-
`:
|
|
49
|
+
color: ${b.default.defineTextColor(t.colors.card[r.toLowerCase()])};
|
|
50
|
+
`:d.css`
|
|
51
51
|
background-color: ${V(t.colors.card[r.toLowerCase()])};
|
|
52
|
-
color: ${
|
|
53
|
-
`)}var l={defineBackgroundColor:V,defineLightBackground:
|
|
52
|
+
color: ${b.default.defineTextColor(V(t.colors.card[r.toLowerCase()]))};
|
|
53
|
+
`)}var l={defineBackgroundColor:V,defineLightBackground:B,getStylesCard:Lo,getStylesFooter:Do,getStylesHeader:Fo,getTextStyles:No,getStyleButton:ko,getBackgroundColorContent:Ro};var P=require("react/jsx-runtime");function L(jo){var h=jo,{variant:o="SOLID",color:r="DEFAULT",borderRadius:t="DEFAULT",borderWidth:e,borderColor:n,borderActive:i=!0}=h,m=c(h,["variant","color","borderRadius","borderWidth","borderColor","borderActive"]);let g={variant:o,color:r};return(0,P.jsx)(T.Provider,{value:g,children:(0,P.jsx)(Io,p(a({$variantKey:g.variant,$colorKey:g.color,$radiusKey:t,$borderWidthKey:e,$borderColorKey:n,$borderActiveKey:i},m),{children:m.children}))})}var Io=(0,S.default)(E.Container.Vertical)`
|
|
54
54
|
${({$variantKey:o,$colorKey:r,$radiusKey:t,$borderActiveKey:e,theme:n})=>l.getStylesCard(o,r,t,e,n)}
|
|
55
|
-
|
|
55
|
+
${({$borderWidthKey:o,theme:r})=>{var e;if(!o)return"";let t=(e=r.borderWidth)==null?void 0:e[o.toLowerCase()];return t?`border-width: ${t}; border-style: solid;`:""}}
|
|
56
|
+
${({$borderColorKey:o,theme:r})=>{var e;if(!o)return"";let t=(e=r.colors.border)==null?void 0:e[o.toLowerCase()];return t?`border-color: ${t};`:""}}
|
|
57
|
+
`;var R=require("styled-components/native"),D=require("@mobilestock-native/container");var F=require("react/jsx-runtime");function H(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:i}=s();return(0,F.jsx)(Oo,p(a({$variantKey:n,$colorKey:i,align:"CENTER",padding:"MD",gap:"XS"},r),{children:o}))}var Oo=(0,R.styled)(D.Container.Horizontal)`
|
|
56
58
|
${({$variantKey:o,$colorKey:r,theme:t})=>l.getBackgroundColorContent(o,r,t)}
|
|
57
|
-
`;var
|
|
59
|
+
`;var N=require("styled-components/native"),k=require("@mobilestock-native/container");var O=require("react/jsx-runtime");function I(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:i}=s();return(0,O.jsx)(Uo,p(a({$variantKey:n,$colorKey:i,padding:"MD",align:"CENTER",gap:"XS"},r),{children:o}))}var Uo=(0,N.styled)(k.Container.Vertical)`
|
|
58
60
|
${({$variantKey:o,$colorKey:r,theme:t})=>l.getBackgroundColorContent(o,r,t)}
|
|
59
|
-
`;function
|
|
61
|
+
`;function zo(){throw new Error("The Card.Content component should not be used directly. Use Card.Content.Vertical, Card.Content.Horizontal instead.")}var U=Object.assign(zo,{Vertical:I,Horizontal:H});var z=C(require("styled-components/native")),M=require("@mobilestock-native/button");var X=require("react/jsx-runtime");function W(o){let{color:r,variant:t}=s();return(0,X.jsx)(Mo,a({$colorKey:r,$variantKey:t},o))}var Mo=(0,z.default)(M.Button)`
|
|
60
62
|
${({$colorKey:o,$variantKey:r,theme:t,backgroundColor:e})=>l.getStyleButton(r,o,t,e)}
|
|
61
|
-
`;var A=C(require("styled-components/native")),G=require("@mobilestock-native/container");var q=require("react/jsx-runtime");function _(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:
|
|
63
|
+
`;var A=C(require("styled-components/native")),G=require("@mobilestock-native/container");var q=require("react/jsx-runtime");function _(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:i}=s();return(0,q.jsx)(Wo,p(a({$variantKey:n,$colorKey:i,padding:"MD",align:"CENTER",gap:"XS"},r),{children:o}))}var Wo=(0,A.default)(G.Container.Horizontal)`
|
|
62
64
|
${({$variantKey:o,$colorKey:r,theme:t})=>l.getStylesFooter(o,r,t)}
|
|
63
|
-
`;var J=C(require("styled-components/native")),Q=require("@mobilestock-native/container");var
|
|
65
|
+
`;var J=C(require("styled-components/native")),Q=require("@mobilestock-native/container");var Z=require("react/jsx-runtime");function Y(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:i}=s();return(0,Z.jsx)(Xo,p(a({$variantKey:n,$colorKey:i,padding:"MD",align:"CENTER",gap:"XS"},r),{children:o}))}var Xo=(0,J.default)(Q.Container.Vertical)`
|
|
64
66
|
${({$variantKey:o,$colorKey:r,theme:t})=>l.getStylesFooter(o,r,t)}
|
|
65
|
-
`;function Ao(){throw new Error("The Card.Footer component should not be used directly. Use Card.Footer.Vertical or Card.Footer.Horizontal instead.")}var
|
|
67
|
+
`;function Ao(){throw new Error("The Card.Footer component should not be used directly. Use Card.Footer.Vertical or Card.Footer.Horizontal instead.")}var j=Object.assign(Ao,{Vertical:Y,Horizontal:_,Button:W});var oo=require("styled-components/native"),ro=require("@mobilestock-native/icons"),to=C(require("@mobilestock-native/tools"));var no=require("react/jsx-runtime");function eo(o){let r=(0,oo.useTheme)(),{variant:t,color:e}=s(),n=e.toLowerCase(),i=r.colors.card[n];return(0,no.jsx)(ro.Icon,a({size:"LG",color:t==="OUTLINE"?i:to.default.defineTextColor(i)},o))}var ao=C(require("styled-components/native")),io=require("@mobilestock-native/typography");var lo=require("react/jsx-runtime");function so(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:i}=s();return(0,lo.jsx)(Go,p(a({$colorKey:i,$variantKey:n},r),{children:o}))}var Go=(0,ao.default)(io.Typography)`
|
|
66
68
|
${({$colorKey:o,$variantKey:r,theme:t})=>l.getTextStyles(r,o,t)}
|
|
67
|
-
`;var
|
|
69
|
+
`;var po=C(require("styled-components/native")),co=require("@mobilestock-native/typography");var mo=require("react/jsx-runtime");function Co(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:i}=s();return(0,mo.jsx)(_o,p(a({size:"LG",weight:"BOLD",$colorKey:i,$variantKey:n},r),{children:o}))}var _o=(0,po.default)(co.Typography)`
|
|
68
70
|
${({$colorKey:o,$variantKey:r,theme:t})=>l.getTextStyles(r,o,t)}
|
|
69
|
-
`;var
|
|
71
|
+
`;var uo=require("styled-components/native"),fo=require("@mobilestock-native/container");var $o=require("react/jsx-runtime");function yo(e){var n=e,{children:o,isFloating:r=!1}=n,t=c(n,["children","isFloating"]);let{variant:i,color:m}=s();return(0,$o.jsx)(qo,p(a({padding:"MD",align:"CENTER_CENTER",gap:"XS",$variantKey:i,$colorKey:m,$isFloatingKey:r},t),{children:o}))}var qo=(0,uo.styled)(fo.Container.Horizontal)`
|
|
70
72
|
${({$variantKey:o,$colorKey:r,$isFloatingKey:t,theme:e})=>l.getStylesHeader(o,r,t,e)}
|
|
71
|
-
`;var
|
|
73
|
+
`;var bo=require("styled-components/native"),go=require("@mobilestock-native/container");var To=require("react/jsx-runtime");function xo(e){var n=e,{children:o,isFloating:r=!1}=n,t=c(n,["children","isFloating"]);let{variant:i,color:m}=s();return(0,To.jsx)(Jo,p(a({gap:"2XS",align:"CENTER_CENTER",padding:"MD",$variantKey:i,$colorKey:m,$isFloating:r},t),{children:o}))}var Jo=(0,bo.styled)(go.Container.Vertical)`
|
|
72
74
|
${({$variantKey:o,$colorKey:r,$isFloating:t,theme:e})=>l.getStylesHeader(o,r,t,e)}
|
|
73
|
-
`;function Qo(){throw new Error("The Card.Header component should not be used directly. Use Card.Header.Vertical or Card.Header.Horizontal instead.")}var
|
|
75
|
+
`;function Qo(){throw new Error("The Card.Header component should not be used directly. Use Card.Header.Vertical or Card.Header.Horizontal instead.")}var Vo=Object.assign(Qo,{Vertical:xo,Horizontal:yo,Icon:eo,Title:Co,Subtitle:so});var Yo=Object.assign(L,{Header:Vo,Content:U,Footer:j});0&&(module.exports={Card});
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mobilestock-native/card",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@mobilestock-native/icons": "^0.
|
|
6
|
+
"@mobilestock-native/icons": "^0.5.0",
|
|
7
7
|
"@mobilestock-native/tools": "^0.0.10",
|
|
8
|
-
"@mobilestock-native/
|
|
9
|
-
"@mobilestock-native/container": "^1.
|
|
10
|
-
"@mobilestock-native/
|
|
8
|
+
"@mobilestock-native/button": "^1.1.1",
|
|
9
|
+
"@mobilestock-native/container": "^1.1.0",
|
|
10
|
+
"@mobilestock-native/typography": "^0.1.0"
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|
|
13
13
|
"react": "catalog",
|